HTMLTextAreaElement: selectionchange event
Baseline
2024
Newly available
Since September 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The selectionchange event of the Selection API is fired when the text selection within a <textarea> element is changed.
This includes both changes in the selected range of characters, or if the caret moves.
This event is not cancelable.
The event is usually processed by adding an event listener on the <textarea>, and in the handler function read by the HTMLTextAreaElement 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.
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
addEventListener("selectionchange", (event) => { })
onselectionchange = (event) => { }
Event type
A generic Event.
Examples
The example below shows how to get the text selected in a <textarea> element.
HTML
<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;
});
Result
Specifications
| Specification |
|---|
| Selection API # selectionchange-event |
| Selection API # dom-globaleventhandlers-onselectionchange |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
selectionchange event
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.