HTMLTextAreaElement: selectionchange 事件

实验性： 这是一个 实验性技术
在生产环境中使用之前，请仔细查看 浏览器兼容性表。

selectionchange 事件是 Selection API 的一部分，当 <textarea> 元素中的文本选择发生更改时触发。这包括所选字符范围的更改，或光标移动。

此事件不可取消。

通常通过在 <textarea> 上添加事件侦听器来处理该事件，并在处理程序函数中读取 HTMLTextAreaElement 的 selectionStart、selectionEnd 和 selectionDirection 属性。

也可以在全局 onselectionchange 事件处理程序上添加侦听器，并在处理程序函数中使用 Document.getSelection() 获取 Selection。但是，这对于获取文本选择的更改并不是很有用。

语法

在诸如 addEventListener() 的方法中使用事件名称，或设置事件处理程序属性。

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

onselectionchange = (event) => {};

事件类型

一个通用的 Event。

示例

下面的示例演示了如何获取 <textarea> 元素中选定的文本。

HTML

html
<div>
  Enter and select text here:<br /><textarea
    id="mytext"
    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

js
const myinput = document.getElementById("mytext");

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

结果

规范

规范
Selection API
# selectionchange-event
Selection API
# dom-globaleventhandlers-onselectionchange

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。