JavaScript 練手小技巧:JS 獲取選中的文本或者禁止選擇文本

有時候,我們需要獲取鼠標選中的文本部分,可以利用 window 的 selection 對象做到。

利用 window.getSelection() 可以得到 window 的 selection 對象。

HTML 部分:

<div id="box">
    測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字測試文字
</div>

當選中文本的時候,最終鼠標會鬆開(mouseup)。所以,需要用到 mouseup 事件。

JavaScript 部分:

 let box = document.getElementById("box");

 box.addEventListener("mouseup",function(){
        let selectedText =  window.getSelection().toString();   // 把選中的內容轉爲字符串。
        if( selectedText.trim() !== ""){    // 去掉字符兩邊的空白
            console.info( selectedText );
        } 
});

當然,也可以禁止用戶選擇任何內容。

let box = document.getElementById("box");

box.addEventListener("mouseup",function(){
    window.getSelection().removeAllRanges();  // 去掉所有選中範圍,也就是禁止選擇內容
});

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章