Membuat Seleksi Otomatis Pada DIV Elemen

Ini sebenarnya bukan hanya bisa digunakan untuk auto selected pada tag div saja, karena ini sangat luas dan bisa juga digunakan pada textarea maupun blockquote.
HTML
<div id="kodeA" onclick="selTxt('kodeA')">KLIK SATU KALI</div>
<div id="kodeB" ondblclick="selTxt('kodeB')">KLIK DUA KALI</div>
JavaScript
/*******
** Get more script: http://www.kangsigit.com **
*************************************************
*****/
function selTxt(containerid) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
}
}


Seperti ini cara kerjanya

Kode-kode posisi penempatannya ada didalam tag div dan pembeda dari kedua kode diatas adalah dari fungsinya.

Untuk yang pertama menggunakan onclick dan itu akan diseleksi ketika teks di klik sekali. Sedangkan pada pilihan kedua pakai ondblclick yang artinya akan diseleksi setelah di klik dobel/ dua kali klik.

Lantas bagaimana jika mau diletakkan dalam kode yang tidak ada onclick maupun ondblclick_nya? Bisa, Anda perlu menambahkan sedikit jQuery ATTR untuk menambahkan itu secara otomatis.

Penambahan ATTR untuk seleksi dalam satu kali klik pada blockquote
$(document).ready(function(){
$("blockquote").attr("onclick", "selTxt('pilihSemua')");
$("blockquote").attr("id", "pilihSemua");
});

Penambahan ATTR untuk seleksi dalam dua kali klik pada blockquote
$(document).ready(function(){
$("blockquote").attr("ondblclick", "selTxt('pilihSemua')");
$("blockquote").attr("id", "pilihSemua");
});

Catatan
Jika menambah jQuery Attr ini, Anda perlu menyimpan jQuery Google Apis..

URL

2 Tanggapan » Lihat

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini