Cara Membuat Seleksi Otomatis Pada Blockquote - ZixIndonesia

Breaking

BANNER 728X90

Thursday, 21 July 2016

Cara Membuat Seleksi Otomatis Pada Blockquote

Cara Membuat Seleksi Otomatis Pada Blockquote
Bagi sobat yang suka berbagi tutorial blog/web, biasanya membagikan kode-kode berupa CSS, HTML, JavaScript dan lainnya yang harus disalin. Standarnya untuk membagikan kode tersebut menggunakan Tag Pre atau Tag Code, tapi kebanyakan para blogger menggunakannya dengan blockquote karena mudah sekali digunakan, dibanding dengan Tag Pre atau Tag Code. Untuk mempermudah menyalin kode yang dibagikan, sebaiknya menggunakan seleksi otomatis yang berarti hanya meng-klik ganda atau double-klik pada blockquote akan terseleksi semua secara otomatis, dan tinggal di salin atau dicopy. berikut ini Cara Membuat Seleksi Otomatis pada Blockquote:

Contoh seleksi otomatis pada blockquote

Sebagai contoh penerapan seleksi otomatis, saya gunakan pada kode yang saya bagikan di blockquote ini, tinggal klik ganda atau doubleclick maka semua kode akan terseleksi secara otomatis. Bagi yang ingin menerapkan fitur seleksi otomatis pada blockquote, letakan kode dibawah ini diatas 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>

Script diatas berlaku untuk Tag apapun, mau Blockquote, Pre, Code dan sebagainya. Jika sobat ingin menerapkan untuk tag pre, maka ganti blockquote menjadi pre. Di script itu saya menggunakan klik ganda atau doubleclick untuk menyeleksi otomatis, jika ingin menggunakannya satu kali klik, sobat tinggal mengganti dblclick menjadi click. Itulah cara membuat seleksi otomatis pada blockquote, semoga dengan menggunakannya script ini, pengunjung dapat mudah menyalin kode-kode pada blog.

No comments:

Post a Comment