JavaScript Seleksi Teks Otomatis

Tabel Konten
  1. Contoh Penggunaan 
  • Contoh Lain: Membuat Fitur Seleksi Otomatis pada Tag PRE 
    1. Versi JavaScript Mentah 
    2. Versi jQuery 
  • Auto Selection Text with JavaScript

    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 mentah maupun pengguna JavaScript Library seperti .

    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

    13 Komentar

    • Beben Koben

      gile nih, script terus artikelnya... =p*

    • Unknown

      Javascript yang sangat menarik..
      apalagi untuk blog yang banyak kumpulan kodenya...

    • Putra

      lha kalo doble-click baru ke seleksi, javascriptnya gmn? =D

      • Taufik Nurrohman

        pre[i].ondblclick = function() {
        autoSelect(this);
        };
        $('pre').on("dblclick", function() {
        autoSelect(this);
        });
        • Larry bring

          code yang ini pilih salah satu ato sisipin dua duanya om?

        • Unknown

          mau ditaruh dmna itu om ?? maaf pemula..

    • Unknown

      \o/

    • Anonim

      tutorial bagus teman.

    • Unknown

      kalau ingin menerepkan tutorial diatas di element </blockquote>, gimana caranya??? :)

      • Taufik Nurrohman

        var bq = document.getElementsByTagName('blockquote');
        for (var i = 0, len = bq.length; i < len; i++) {
        bq[i].onclick = function() {
        autoSelect(this);
        };
        }

        atau

        $(document).ready(function() {
        $('blockquote').on("click", function() {
        autoSelect(this);
        });
        });
    • Admin

      tapi tetap saja pada area komentar tidak bekerja, ada penambahan seperti apa biar area komentar bekerja mas taufik??
      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();
      }
      }

      // Eksekusi di sini
      var pre = document.getElementsByTagName('pre');
      for (var i = 0, len = pre.length; i < len; i++) {
      pre[i].ondblclick = function() {
      autoSelect(this);
      };
      }

      • Kang Mousir

        coba pindahkan posisi js nya berada diatas tag body.

    • Anonim

      Nah kalau untuk fungsi autoselect versi JQuerynya gimana min ? Saya pengen semua full JQuery hehehe.. atau mungkin bisa dibuatkan artikel tentang konversi javascript murni ke JQuery :D 0:)

    Komentar telah ditutup.