有時候,我們需要獲取鼠標選中的文本部分,可以利用 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(); // 去掉所有選中範圍,也就是禁止選擇內容
});