JavaScript ile seçilen metini almak için window.getSelection() fonskiyonunu kullanabilirsiniz. Aşağıdaki ilk örnekte seçilen metni hemen altındaki div içine kopyalayama ikinci örnekte ise seçilen metni buton yardımcı ile div içine eklemeyi göstereceğim.
Örnek 1: Seçilen metni ikinci div içine kopyalama
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Tasarim Kodlama</title> </head> <body> <div id="metin"> Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. </div><br><br> <div id="secim"></div> <script> var mDiv=document.querySelector("#metin"); var sDiv=document.querySelector("#secim"); //belge yüklenmesi document.addEventListener("DOMContentLoaded", function(event) { //metin içinde bir bölüm seçimi mDiv.onmouseup=function(event) { sDiv.textContent= window.getSelection().toString(); } }); </script> </body> </html> |
Örnek 2: Seçilen metni buton ile div içine kopyalama
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Tasarim Kodlama</title> </head> <body> <div id="metin"> Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur. </div><br><br> <div id="secim"></div> <button type="button" id="kontrol">Seçimi Kopyala</button> <script> var mDiv=document.querySelector("#metin"); var sDiv=document.querySelector("#secim"); var kontrol=document.querySelector("#kontrol");//id ile uyuşan tek nesne kontrol.onclick=function(){ sDiv.textContent= window.getSelection().toString(); } </script> </body> </html> |
Yorum Yap