JS select事件:選擇文字

2020-07-16 10:05:08
在 JavaScript 中,當在文字方塊或文字區域內選擇文字時,將觸發 select 事件。通過該事件可以設計使用者選擇操作的互動行為。

在 IE 9+、Opera、Firefox、Chrome 和 Safari 中,只有使用者選擇了文字且釋放滑鼠,才會觸發 select 事件;但是在 IE8 及更早版本中,只要使用者選擇了一個字母,不必釋放滑鼠,就會觸發 select 事件。另外,在呼叫 select() 方法時也會觸發 select 事件。

【範例】在下面的範例中,當選擇第 1 個文字方塊中的文字時,則在第 2 個文字方塊中會動態顯示使用者所選擇的文字。
<input type="text" id="a" value="請隨意選擇字串" />
<input type="text" id="b" />
<script>
    var a = document.getElementsByTagName("input")[0];
    // 獲取第一個文字方塊的參照指標
    var b = document.getElementsByTagName("input")[1];
    // 獲取第二個文字方塊的參照指標
    a.onselect = function(){  // 為第一個文字方塊系結select事件處理常式
        if (document.selection){  // 相容IE
            o = document.selection.createRange(); // 建立一個選擇區域
            if(o.text.length > 0)  // 如果選擇區域記憶體在文字
            b.value = o.text;   // 則把該區域內的文字賦值給第二個文字方塊
        }else{  // 相容DOM
            p1 = a.selectionStart;  // 獲取文字方塊中選擇的初始位置
            p2 = a.selectionEnd;  // 獲取文字方塊中選擇的結束位置
            b.value = a.value.substring(p1, p2);
            // 擷取文字方塊中被選取的文字字串,然後賦值給第二個文字方塊
        }
    }
</script>