Ditulis oleh: Ditulis pada: 9/28/2014
Multiple Tags Untuk Select All Text Jquery - Dengan menggunakan select all text jquery ini dapat memudahkan pengunjung blog untuk menyeleksi atau mem-block teks atau kode untuk selanjutnya di-copy. Biasanya ini difungsikan pada pre dan blockquote yang biasanya digunakan untuk menampilkan kode-kode css, html, ataupun javascript pada postingan-postingan tutorial blog.
Dan untuk select all text jquery ini sudah pernah di-share oleh Kang Ismet dan saya yakin Anda semua pernah membaca atau mungkin sekarang tengah memakainya. Namun di postingannya tersebut hanya menggunakan pilihan satu tag saja, bisa untuk pre tag atau digunakan untuk blockquote tag.
Lantas bagaimana jika kita ingin menggunakannya pada dua-duanya, yaitu digunakan pada pre tag juga pada blockquote tag?
Contohnya seperti saya ini, sebelum menggunakan pre tag untuk menampilkan kode tutorial, dulu saya menampilkan kodenya menggunakan blockquote tag dan sudah banyak tutorial saya yang menggunakan blockquote ini. Dan pada blockquote tag tersebut saya juga menggunakan select all text jquery.
Namun setelah saya mengganti dengan pre tag untuk menampilkan kode, maka saya juga mengalihkan select all text jquery tersebut menjadi berfungsi untuk pre tag yang otomatis blockquote tag tidak memiliki seleksi otomatis pada kodenya dan tidak mungkin mengganti semua blockquote yang telah ada menjadi pre karena postingannya sudah cukup banyak.
Nah akhirnya setelah googling sana-sini, saya menemukan cara agar select all text jquery ini bisa digunakan pada pre tag maupun blockquote tag. Atau mungkin Anda menggunakan div untuk menampilkan kode, maka div tersebut bisa ditambahkan pada jquery-nya.
Seperti kita ketahui, select all text jquery yang di-share Kang Ismet seperti berikut:
<script type='text/javascript'>
var pres = document.getElementsByTagName('blockquote');
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener('dblclick', function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
</script>
Nah agar jquery ini bisa digunakan pada pre, blockquote, ataupun div, silahkan ganti kode
document.getElementsByTagName('blockquote'); dengan kode document.querySelectorAll('blockquote,pre,div.kode'); sehingga menjadi seperti berikut:
<script type='text/javascript'>
//<![CDATA[
var pres = document.querySelectorAll('blockquote,pre,div.kode');
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("dblclick", function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
//]]>
</script>
Silahkan tambahkan lagi seleksi tag lainnya pada kode
('blockquote,pre,div.kode') di dalam kurung kutip dengan dipisahkan dengan tanda koma.