tRikSonic
Tema

Seleksi teks otomatis dengan metode double click

Terakhir diperbarui : 23 Mei 2018 - 11.04
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.
Cara membuat slideshow sederhana
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);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<pre>
.slider {
   display : none;
   border: 1px solid #bdbdbd;
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   background: #e0e0e0;
   padding: 35px;
   min-height: 125px;
}
</pre>

<blockquote>
  <strong>HTML5</strong> merupakan salah satu karya 
  Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C) 
  untuk mendefinisikan sebuah bahasa markah tunggal 
  yang dapat ditulis dengan cara HTML ataupun XHTML.
</blockquote>

<p>
 <i>pada hari minggu</i> kuturut ayah kekota
</p>


<script>
//<![CDATA[
//tambahkan element lainnya sesuai dengan kebutuhan 
//misal pre,blockquote,i,code,div dll...
var TargetSeleksi = document.querySelectorAll("pre,blockquote,i");     
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);
}
//]]>
</script>

</body>
</html>

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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<p>
  klik double element <code>pre</code> berikut ini :
</p>

<pre>
.slider {
   display : none;
   border: 1px solid #bdbdbd;
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   background: #e0e0e0;
   padding: 35px;
   min-height: 125px;
}
</pre>

<script>
//<![CDATA[
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);
}
//]]>
</script>

</body>
</html>

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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<h2><code>onclick="selectAll(this)"</code></h2>
<pre onclick="selectAll(this)">
body {
   display: block;
   margin: 8px;
}
</pre>

<hr>

<h2><code>ondblclick="selectAll(this)"</code></h2>
<pre ondblclick="selectAll(this)">
function demo (){
  alert("Javascript aktif");
}
</pre>


<!-- javascript code -->
<script>
function selectAll(e) {
  if (window.getSelection && document.createRange) {
    var range = document.createRange();
    range.selectNodeContents(e);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  } else {
    if (document.body.createTextRange) {
      var rangeToSelect = document.body.createTextRange();
      rangeToSelect.moveToElementText(e);
      rangeToSelect.select();
    }
  }
}
</script>

</body>
</html>
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.