JavaScript Seleksi Teks Otomatis

Membuat fitur seleksi teks otomatis pada elemen-elemen formulir seperti <textarea> atau <input> memang mudah, tetapi membuat fitur seleksi otomatis pada elemen-elemen non formulir seperti <div> dan <pre> membutuhkan sedikit langkah tambahan. Berikut ini adalah 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 tambahan untuk memperbaharui posting Saya yang lama mengenai cara membuat fitur seleksi teks otomatis pada tag <pre> di sini. Sejak rilis jQuery 1.9, sepertinya jQuery.browser sudah ditiadakan, jadi posting tersebut sudah tidak berlaku lagi.

Potongan kode di atas lebih baik, dan bisa diaktifkan oleh pengguna JavaScript mentah maupun pengguna JavaScript Library seperti jQuery.

Contoh Penggunaan

Parameter elem akan kita gunakan sebagai referensi menuju elemen yang ingin kita seleksi. Misalnya, kita ingin menyeleksi semua teks di dalam elemen yang memiliki ID foo:

autoSelect(document.getElementById('foo'));

Kode di atas merupakan contoh penerapan JavaScript mentah. Untuk menerapkannya pada jQuery, kita cukup mengganti pola selektornya saja:

autoSelect($('#foo')[0]);

Demo JavaScript Demo jQuery

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

Lihat Demo

Versi jQuery

$('pre').on("click", function() {
    autoSelect(this);
});

Lihat Demo

---

Gambar: Google

Share this post