js獲取鼠標選中的文字

一、獲取選中的文字:jquery

document.selection.createRange().text; IE9如下使用chrome

window.getSelection().toString(); 其餘瀏覽器使用瀏覽器

$('p').mouseup(function(){
    var txt = window.getSelection?window.getSelection():document.selection.createRange().text;
    alert(txt) ;
})

二、取消處於選中狀態的文字:dom

document.selection.empty(); IE9如下使用測試

window.getSelection().removeAllRanges(); 其餘瀏覽器使用this

$('p').mouseup(function(){
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
})

上述方法不只對div或p標籤中的文本有效(會自動忽略選中的‘圖片’),在ie和chrome中對input中的文本也有效,但在firefox中無效,jquery spa

的.select()事件(僅對input有效)或js的onselect事件(僅對input有效)和js的.select()(使input中的文本內容處於選中狀態)方法在三個瀏覽器中都有效。firefox

能夠用鼠標選中下段文字測試效果:code

是他,是他,是他,就是他.咱們的朋友小哪吒.是他,就是他,是他,就是他.少年英雄,小哪吒.上天他比~(稍長音),天要高~(同上).下海他比~(同上),海更大啊~啊~(同上).智鬥妖魔~,勇降鬼怪.少年英雄,就是小哪吒.有時,他很聰明.有時,他也犯傻.他的個頭跟我通常高.有時,他很努力.有時,他也貪玩.他的年級和我通常大~~(長音).上天他比~(稍長音),天要高~(同上).下海他比~(同上),海更大啊~啊~(同上).智鬥妖魔~,勇降鬼怪.少年英雄,就是小哪吒~~(長音).blog

三、使某Dom中的文字處於選中狀態:

IE中關於range參見http://msdn.microsoft.com/en-us/library/ie/ms536401%28v=vs.85%29.aspx

$('.somedom').click(function(){
    /* not ok for firefox
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(this);
        selection.removeAllRanges();;
        selection.addRange(range);*/
    this.focus();    
    if(window.getSelection){
        var range=document.createRange();
        range.selectNodeContents(this);
        var selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range)            
        }
    else if(document.selection){
        //for ie
        var range=document.body.createTextRange()
        range.moveToElementText(this)
        range.select();
    }     
相關文章
相關標籤/搜索