Membuat Seleksi Otomatis Pada Tag Blockquote dan Pre

Cara Membuat Seleksi Otomatis Pada Tag Blockquote dan Pre - 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, itu dikarenakan blockquote lebih mudah digunakan dan tidak ribet, tinggal block > klik ikon "quote" mudah kan?, contoh penggunaan tag pre:

<pre>Sekarang aku makin sayang sama kamu</pre>

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.

Untuk menerapkan seleksi otomatis pada tag blockquote:
1. Login ke Blogger
2. Dashboar > klik template > edit HTML
3. 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>

Untuk menerapkan seleksi otomatis pada tag pre:
Ikuti langkah ke-1, 2, dan 3 seperti di atas.

<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&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>

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

Tweet

Unknown pada 12/20/2013