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;
});