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="my-text" 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("my-text");
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 |
浏览器兼容性
加载中…