Cara Membuat Seleksi Otomatis Pada Blockquote

Satu lagi materi saya temukan dari sahabat sekaligus master blogger Indonesia Kang Ujang Ismatullah (Kang Ismet) tentang bagaimana cara membuat seleksi otomatis pada tag blockquote. Ini adalah salah satu materi yang sebenarnya sedang saya cari-cari selama ini sepanjang sejarah saya mengikuti artikel-artikel dari Kang Ismet.

Jika kalian pernah mengunjungi blog Kang Ismet dan menemukan halaman yang memuat script-script programming web blog, tentunya kalian pernah copas / copy paste pada script tersebut dan dengan cara hanya cukup melakukan double click saja seluruh isi script bisa kalian block. Ini sangat berbeda jika tag HTML nya tidak diberikan sentuhan apapun, maka jika kita klik dua kali pada sebuah paragraph, maka yang ke-block hanyalah satu kata atau satu baris. Namun berbeda dengan trik yang satu ini.

Kebetulan pada blog saya yang ini, saya sudah mencoba mempraktikkan tutorial yang satu ini dan hasilnya ….. Sempurnaaa…!!!.

Jika kalian ingin melihat bagaimana tutorial ini berjalan, silahkan kalian kunjungi halaman Cara Menampilkan Jam Live Di Blog Dengan Javascript dan klik dua kali (double click) pada kumpulan script yang ada di situ. Jika kalian hanya melakukan double clicksaja dan seluruh script yang ada di block tersebut terseleksi seluruhnya, artinya script serta tutorial yang saya tulis ini berjalan dengan baik. Atau kalian bisa melihat demo script nya dengan malakukan double click pada kumpulan script javascript di bawah ini.

Untuk mempersingkat waktu, mari kita belajar trik dan tips cara membuat seleksi otomatis pada blockquote.

Jika kalian pernah mengoprek-oprek kode template blog kalian, tentunya kalian pernah menemukan atribut BLOCKQUOTE. Dan biasanya ini digunakan untuk meletakkan objek teks tertentu sehingga teks yang dimaksud bisa terlihat hi ress.

Maka langkahnya adalah kita manipulasi perintah yang membidik atribut BLOCKQUOTE bisa diseleksi secara otomatis meski dengan satu klik atau double click.

Silahkan copas saja script di bawah ini sebelum kode </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>

Note :

Di sana saya telah menentukan bahwa script akan berjalan pada konten yang berada pada atribut  blockquote  . Akan tetapi kalian bisa menggantinya dengan  pre  misalnya atau pada atribut HTML apapun yang kalian kehendaki, jadi script di atas bisa dipakai di seluruh atribut HTML. Caranya adalah kalian cukup mengganti pada baris ke dua yaitu teks yang berwarna merah dengan kata  pre  .

Selain itu kalian bisa memilih apakah seleksi bisa dilakukan dengan cara double click atau hanya klik sekali saja. Untuk script di atas telah diset dengan cara klik dua kali / double click, namun jika kalian ingin hanya klik satu kali saja, kalian bisa mengganti script baris ke tiga pada teks yang berwarna hijau dengan kata  click  .

Semoga artikel ini bermanfaat dan saya sangat berterima kasih kepada Kang Ismet atas ilmu dan wawasan yang diberikan.


Resource :  http://blog.kangismet.net/2013/07/membuat-seleksi-otomatis-pada-tag.html