Auto Highlight text dalam tags pre menggunakan jQuery
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 menandaiSebenarnya banyak alternatif lain selain menggunakan
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
<script type='text/javascript'>
//<![CDATA[
jQuery( document ).ready(function() {
jQuery( 'pre.block' )( 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 ><code>.....Embed, LINK atau Kode disini.....</code></pre>Untuk Double-Click, lihat jQuery diatas, ganti
.click dengan .dblclickSumber: 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
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>
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon