在 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>