HTMLInputElement: selectionchange 事件

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

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

此事件不可取消。

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

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

语法

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

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

onselectionchange = (event) => {};

事件类型

一个通用的 Event。

示例

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

HTML

html
<div>
  Enter and select text here:<br /><input id="mytext" rows="2" cols="20" />
</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 的浏览器中加载。