Monday, January 16, 2012

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

Labels: ,

13 Comments:

At Thursday, March 15, 2012 at 2:47:00 PM GMT+7, Blogger Putra said...

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

 
At Thursday, March 15, 2012 at 8:17:00 PM GMT+7, Blogger Taufik Nurrohman said...

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

 
At Saturday, March 24, 2012 at 3:22:00 AM GMT+7, Blogger Dody FariaL said...

untuk pre code ada ga? yang buat blogger

 
At Saturday, March 24, 2012 at 3:18:00 PM GMT+7, Blogger Taufik Nurrohman said...

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

 
At Sunday, September 16, 2012 at 7:36:00 PM GMT+7, Anonymous Anonymous said...

udah sya pasang yang diatas ^^^

tapi kok gak mau ya.... :p

 
At Monday, September 17, 2012 at 8:22:00 PM GMT+7, Anonymous Anonymous said...

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

 
At Wednesday, September 19, 2012 at 12:18:00 PM GMT+7, Blogger Taufik Nurrohman said...

Di dalam tag <script> :W

 
At Sunday, January 13, 2013 at 8:50:00 PM GMT+7, Blogger dfdsh said...

tipe script nya java kan om.....

 
At Monday, January 14, 2013 at 10:51:00 PM GMT+7, Blogger Taufik Nurrohman said...

JavaScript. Bukan Java.

 
At Friday, July 26, 2013 at 7:27:00 PM GMT+7, Blogger Unknown said...

So how to double click to highlight as your own?

 
At Friday, July 26, 2013 at 8:24:00 PM GMT+7, Blogger Taufik Nurrohman said...

It's already discussed completely ⇒ here

 
At Saturday, July 27, 2013 at 9:09:00 PM GMT+7, Blogger Unknown said...

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


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

 
At Wednesday, August 7, 2013 at 5:10:00 PM GMT+7, Blogger Ali Zain Syahab said...

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>

 

Post a Comment

<< Home