Membuat fitur seleksi teks otomatis pada elemen-elemen formulir menyerupai <textarea> atau <input> memang mudah, tetapi menciptakan fitur seleksi otomatis pada elemen-elemen non formulir menyerupai <div> dan <pre> membutuhkan sedikit langkah tambahan. Berikut ini yaitu fungsinya:
function autoSelect(elem) { var selection, range; if (window.getSelection) { selection = window.getSelection(); range = document.createRange(); range.selectNodeContents(elem); selection.removeAllRanges(); selection.addRange(range); } else if (document.selection) { // IE selection = document.selection.createRange().text; range = document.body.createTextRange(); range.moveToElementText(elem); range.select(); } }Posting ini juga sekaligus akan Saya jadikan sebagai dokumentasi suplemen untuk memperbaharui posting Saya yang usang mengenai cara menciptakan fitur seleksi teks otomatis pada tag <pre> di sini. Sejak rilis jQuery 1.9, tampaknya jQuery.browser sudah ditiadakan, jadi posting tersebut sudah tidak berlaku lagi.
Potongan instruksi di atas lebih baik, dan dapat diaktifkan oleh pengguna JavaScript mentah maupun pengguna JavaScript Library menyerupai jQuery.
Contoh Penggunaan
Parameter elem akan kita gunakan sebagai rujukan menuju elemen yang ingin kita seleksi. Misalnya, kita ingin menyeleksi semua teks di dalam elemen yang mempunyai ID foo:
autoSelect(document.getElementById('foo'));Kode di atas merupakan pola penerapan JavaScript mentah. Untuk menerapkannya pada jQuery, kita cukup mengganti pola selektornya saja:
autoSelect($('#foo')[0]);Contoh Lain: Membuat Fitur Seleksi Otomatis pada Tag PRE
Versi JavaScript Mentah
var pre = document.getElementsByTagName('pre'); for (var i = 0, len = pre.length; i < len; i++) { pre[i].onclick = function() { autoSelect(this); }; }Versi jQuery
$('pre').on("click", function() { autoSelect(this); });Gambar: Google
Sumber https://www.dte.web.id/