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);
}
<!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>