Dengan membuat seleksi lebih cepat, maka akan mempermudah pengunjung dalam melakukan seleksi dan meng copy kode-kode script mulai dari HTML, CSS, Java Script, jQuery dan lain-lain yang telah dibungkus oleh blockquote ataupun pre. Cara ini lebih sering disebut Clock To Select All yaitu dengan sekali klik saja teks yang terdapat di dalam blockquote ataupun pre akan terseleksi semua.
Baca juga Cara Memasang Scroll Pada Blockquote
Jika kalian ingin mempermudah pengunjung kalian untuk mengcopy kode didalam blockquote atau pre kalian, maka lebih baik kalian memasang ini. Silahkan ikuti tutorial dibawah ini :
Cara Agar Blockquote dan Pre Dapat Terseleksi Otomatis
1. Masuk kedashboard kalian
2. Pilih menu Template ? Edit HTML
3. Pilih kode dibawah ini yang sedang kalian butuhkan, lalu copy dan paste kan kode dibawah ini tepat diatas kode </body>
Untuk seleksi Otomatis Pada Tag Blockquote ini kodenya:
<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>
Untuk seleksi Otomatis Pada Tag Pre ini kodenya:
<script type='text/javascript'>
var pres = document.getElementsByTagName("pre");
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>
Catatan | Pada script di atas, saya menggunakan double click dalam men-seleksi teks. Untuk menerapkan satu kali klik langsung terseleksi, maka ganti dblclick menjadi click |
Anda sedang membaca artikel Cara Agar Blockquote dan Pre Dapat Terseleksi Otomatis - TrobosanBlog dan artikel ini url permalinknya adalah https://trobosanblog.blogspot.com/2016/11/cara-agar-blockquote-dan-pre-dapat.html Semoga artikel ini bisa bermanfaat.