Membuat Seleksi Otomatis Pada Tag Blockquote

Pada tutorial sebelumnya admin sudah membahas tentang cara Membuat Efek Loading pada Form Komentar. Nah, tutorial sekarang kita akan membahas tentang cara Membuat Seleksi Otomatis Pada Tag Blackquote. Bagi sahabat yang suka berbagi tutorial, biasanya membagikan kode-kode yang suka dicopy. Standarnya penggunaan kode itu pada tag code atau tag pre. Akan tetapi setelah saya mengunjungi blog sahabat, tidak sedikit menggunakan blockquote untuk berbagi kode.

Untuk mempermudah mengcopy code yang dibagikan, sebaiknya menggunakan seleksi otomatis. Artinya, dengan hanya mengklik atau klik ganda (double click) kode tersebut akan terseleksi semua, tinggal melakukan Ctrl+C atau klik kanan kemudian Copy.

Sebagai contoh penerapan seleksi otomatis ini, saya gunakan pada kode yang saya bagikan, sobat tinggal klik ganda, maka semua kode akan terseleksi. Saya menggunakan tag pre untuk semua kode yang saya bagikan. Bagi sobat yang menggunakan tag blockquote, untuk menerapkan seleksi otomatis ini, simpan kode dibawah ini sebelum </body>

<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;blockquote&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

Sebetulnya script di atas tidak mutlak untuk tag blockquote, karena selektornya berupa blockquote maka hanya berlaku untuk tag blockquote.

Editing Script

Seperti saya jelaskan sebelumnya, script di atas berlaku untuk tag apapun, apabila sobat ingin menerapkan untuk tag pre, maka ganti blockquote pada baris ke 2, menjadi pre.

Pada script di atas, saya menggunakan klik ganda (double click) untuk menerapkan satu kali klik langsung terseleksi, sobat tinggal mengganti dblclick menjadi click.

Semoga bermanfaat...

Source

Artikel Terkait

Membuat Seleksi Otomatis Pada Tag Blockquote

4/ 5

Oleh Randi Afrinal

Randi Afrinal 9/04/2013 Komentar