HTMLInputElement: selectionchange event
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The selectionchange
event of the Selection API is fired when the text selection within an <input>
element is changed.
This includes both changes in the selected range of characters, or if the caret moves.
Bubbles | Yes |
---|---|
Cancelable | No |
Interface | Event |
Event handler property | onselectionchange |
The event is usually processed by adding an event listener on the <input>
, and in the handler function read by the HTMLInputElement
selectionStart
, selectionEnd
and selectionDirection
properties.
It is also possible to add a listener on the global onselectionchange
event handler, and within the handler function use Document.getSelection()
to get the Selection
. However this is not very useful for getting changes to text selections.
Examples
The example below shows how to get the text selected in an <input>
element.
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
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;
});
Result
Specifications
Specification |
---|
Selection API # selectionchange-event |
Browser compatibility
BCD tables only load in the browser