Untuk menampilkan kode Embed, LINK maupun kode-kode lainnya yang akan ditampilkan dalam posting, biasanya menggunakan <pre> Tags, mungkin format text dalam tags ini sangat ideal untuk ditampilkan, khususnya untuk menampilkan kode.

Dalam sebuah tutorial, biasanya ada kode-kode khusus yang diperintahkan untuk di Copy. Terkadang banyak orang yang merasa kesulitan dan repot untuk meng Copy nya, karena harus melakukan block/ select all secara manual sebelum meng copy data tersebut.

Contoh Highlight pada Tag pre, Klik 2X untuk menandai

Sebenarnya banyak alternatif lain selain menggunakan <pre> tags, seperti halnya text input atau extarea yang memungkinkan juga untuk menggunakan metode select all, tetapi terkadang kita kehilangan format, tidak seperti yang ditawarkan dalam <pre> tags.

Masing-masing browser memiliki cara mereka sendiri untuk memilih teks.
Internet Explorer menggunakan createTextRange.
Opera dan Firefox menggunakan createRange.
Safari menggunakan DOMSelection.

Dalam hal ini kita dapat menggunakan jQuery hack berikut ini sebagai auto highlight/ select all untuk digunakan dalam <pre> tags, karena selain sederhana, dapat juga dijadikan sebagai solusi komplikasi lintas platform. Letakan kode ini kedalam tag <head>

<script type='text/javascript'>
//<![CDATA[
jQuery( document ).ready(function() {  
    jQuery( 'pre.block' ).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 );
        }
    } );
} );
//]]>
</script>

Cara Menggunakan:
Sisipkan class='block' pada setiap tags <pre>.

<pre class='block'><code>.....Embed, LINK atau Kode disini.....</code></pre>

Untuk Double-Click, lihat jQuery diatas, ganti .click dengan .dblclick
Sumber: Magp.ie

Menurut sumber lain: dte.web.id, Sejak rilis JQuery 1.9, sepertinya jQuery.browser sudah ditiadakan, jadi posting tersebut sudah tidak berlaku lagi.

Disana dijelaskan bahwa untuk membuat fitur seleksi teks otomatis pada elemen-elemen formulir seperti <textarea> atau <input> memang mudah, tetapi untuk membuat fitur seleksi otomatis yang digunakan pada elemen-elemen non formulir seperti <div> dan <pre> membutuhkan sedikit langkah tambahan.

Berikut ini adalah fungsi baru sebagai pengganti fungsi lama:

JavaScript


<script type='text/javascript'>
//<![CDATA[

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

//]]>
</script>

Versi JavaScript


<script type='text/javascript'>
//<![CDATA[

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

//]]>
</script>

Versi JQuery


<script type='text/javascript'>
//<![CDATA[

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

//]]>
</script>

Sumber: www.dte.web.id

Auto Highlight text dalam tags pre menggunakan jQuery

JavaScript

Versi JavaScript

Versi JQuery