Auto Highlight Teks di dalam Tag PRE dengan jQuery

Posting ini sudah kadaluarsa. Mengapa?

Auto Highlight Text Inside Pre with jQuery

Sebenarnya ini tidak mutlak pada elemen <pre>. Hanya karena selektornya saja yang berupa $('pre') jadi fungsi seleksi otomatis ini diberlakukan untuk elemen <pre>:

$(function() {
    $('pre').click(function() {
        var refNode = $(this)[0];
        if($.browser.msie) {
            var range = document.body.createTextRange();
            range.moveToElementText(refNode);
            range.select();
        } else if($.browser.mozilla || $.browser.opera) {
            var selection = window.getSelection();
            var range = document.createRange();
            range.selectNodeContents(refNode);
            selection.removeAllRanges();
            selection.addRange(range);
        } else if($.browser.safari) {
            var selection = window.getSelection();
            selection.setBaseAndExtent(refNode, 0, refNode, 1);
        }
    });
});

Sumber: Magp.ie

13 Komentar

  • Putra

    kalo mau kayak blog nya ini gmn mas?? ada title nya klik ganda utk menyeleksi semua kode?? :D

  • Taufik Nurrohman

    @Alam Perwira Itu cuma pake JQuery .attr() saja kok :)

    $(function() {
    $('pre').attr('title', 'Klik untuk menyeleksi semua kode!').click(function() {
    var refNode = $(this)[0];
    if($.browser.msie) {
    var range = document.body.createTextRange();
    range.moveToElementText(refNode);
    range.select();
    } else if($.browser.mozilla || $.browser.opera) {
    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(refNode);
    selection.removeAllRanges();
    selection.addRange(range);
    } else if($.browser.safari) {
    var selection = window.getSelection();
    selection.setBaseAndExtent(refNode, 0, refNode, 1);
    }
    });
    });
    • Anonim

      udah sya pasang yang diatas ^^^

      tapi kok gak mau ya.... :p

      • Ali Zain Syahab

        klo blm bekerja coba deh tambahin kode berikut:
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/></script>

  • Dody FariaL

    untuk pre code ada ga? yang buat blogger

  • Taufik Nurrohman

    @Dody FariaL Sama saja kok. Saya juga memakai <pre><code> ...

  • Anonim

    mas itu kodenya di taro dimana ya mas maklum masih newbie :(

  • Unknown

    So how to double click to highlight as your own?

    • Taufik Nurrohman

      It's already discussed completely ⇒ here

      • Unknown

        Thanks but how to use of your code?
        pre[i].ondblclick = function() {
        autoSelect(this);
        };

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

Komentar telah ditutup.