HTMLTextAreaElement: selectionchange 事件

Baseline 2024

新推出

自 2024 年 9 月起，此功能已可在最新裝置和瀏覽器版本上使用。此功能可能無法在舊裝置或瀏覽器上使用。

selectionchange 事件是 Selection API 的一部分，當 <textarea> 元素中的文字選擇發生改變時，該事件會被觸發。這包括字元選擇範圍的變化，或者插入游標（caret）的移動。

此事件不可取消。

通常，透過在 <textarea> 元素上新增事件監聽器來處理此事件，並在處理函式中透過 HTMLTextAreaElement 的 selectionStart、selectionEnd 和 selectionDirection 屬性來獲取相關資訊。

也可以為全域性的 onselectionchange 事件處理程式新增監聽器，並在處理函式中使用 Document.getSelection() 來獲取 Selection 物件。然而，這對於獲取文字選擇的變化不太有用。

語法

在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。

addEventListener("selectionchange", (event) => { })

onselectionchange = (event) => { }

<div>
  Enter and select text here:<br /><textarea
    id="my-text"
    rows="2"
    cols="20"></textarea>
</div>
<div>selectionStart: <span id="start"></span></div>
<div>selectionEnd: <span id="end"></span></div>
<div>selectionDirection: <span id="direction"></span></div>

JavaScript

const myInput = document.getElementById("my-text");

myInput.addEventListener("selectionchange", () => {
  document.getElementById("start").textContent = myInput.selectionStart;
  document.getElementById("end").textContent = myInput.selectionEnd;
  document.getElementById("direction").textContent = myInput.selectionDirection;
});