Seleksi teks otomatis dengan metode double click

Cara membuat seleksi teks otomatis dengan metode double click - kali ini kita akan mempelajari tutorial tentang bagaimana membuat seleksi teks otomatis. Tutorial kali ini kita akan menggunakan cara metode double click atau klik dua kali pada teks yang sudah disetting sebelumnya.

Metode seleksi teks otomatis pada tutorial kali ini penggunaannya menggunakan javascript. Mengapa menggunakan double click atau klik 2 kali, karena dengan menggunakan cara ini akan memudahkan user atau pengunjung/pembaca artikel dalam melakukan seleksi sebuah teks.

Kenapa tidak menggunakan one click atau satu kali klik, karena tidak semua pembaca artikel suka dengan metode satu kali klik otomatis terseleksi, misal anda pengunjung blog hanya ingin menyeleksi bagian bagian tertentu saja pada teks atau code yang anda buat

Contoh 1 Javascript Kode

var TargetSeleksi = document.querySelectorAll("pre,blockquote,i,code");
for (var i = 0; i < TargetSeleksi.length; i++) {
    TargetSeleksi[i].addEventListener("dblclick", function() {
        var selection = getSelection();
        var range = document.createRange();
        range.selectNodeContents(this);
        selection.removeAllRanges();
        selection.addRange(range);
    }, false);
}

Contoh 2 Javascript Kode

Contoh berikut menggunakan .getElementsByTagName() yang membedakan dengan contoh yang pertama terletak pada .querySelectorAll()

var TargetSeleksi = document.getElementsByTagName("pre");
for (var i = 0; i < TargetSeleksi.length; i++) {
    TargetSeleksi[i].addEventListener("dblclick", function() {
        var selection = getSelection();
        var range = document.createRange();
        range.selectNodeContents(this);
        selection.removeAllRanges();
        selection.addRange(range);
    }, false);
}

Perhatikan kode bagian document.getElementsByTagName("pre"); silahkan sesuaikan dengan Tag HTML yang dikehendaki pada bagian yang bertanda stabilo, misal blockquote atau div atau p, dll.

Contoh 3 Javascript Kode

Cara yang saya gunakan pada blog ini.

/**
 * @param {?} e
 * @return {undefined}
 */
function selectAll(e) {
  if (window.getSelection && document.createRange) {
    /** @type {(Range|null)} */
    var range = document.createRange();
    range.selectNodeContents(e);
    /** @type {(Selection|null)} */
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  } else {
    if (document.body.createTextRange) {
      /** @type {(TextRange|null)} */
      var rangeToSelect = document.body.createTextRange();
      rangeToSelect.moveToElementText(e);
      rangeToSelect.select();
    }
  }
}

Cara Penerapan dengan atribut onclick

Penerapan dengan 1 kali klik

<pre onclick="selectAll(this)">
  <!-- code -->
</pre>

Cara Penerapan dengan atribut ondblclick

Penerapan dengan 2 kali klik

<pre ondblclick="selectAll(this)">
  <!-- code -->
</pre>