W3cubDocs

/Web APIs

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.

This event is not cancelable.

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 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.

js

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

onselectionchange = (event) => {};

Event type

A generic Event.

Examples

The example below shows how to get the text selected in an <input> element.

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;
});

Result

Specifications

Specification
Selection API
# selectionchange-event
Selection API
# dom-globaleventhandlers-onselectionchange

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
selectionchange_event
NoA selectionchange event is fired on Document, see Document's selectionchange event. See bug 1327098 for firing the event on <input> elements.
NoA selectionchange event is fired on Document, see Document's selectionchange event. See bug 1327098 for firing the event on <input> elements.
 92 No
NoA selectionchange event is fired on Document, see Document's selectionchange event. See bug 1327098 for firing the event on <input> elements.
 No
NoA selectionchange event is fired on Document, see Document's selectionchange event. See bug 1327098 for firing the event on <input> elements.
NoA selectionchange event is fired on Document, see Document's selectionchange event. See bug 1327098 for firing the event on <input> elements.
 92
NoA selectionchange event is fired on Document, see Document's selectionchange event. See bug 1327098 for firing the event on <input> elements.
 No
NoA selectionchange event is fired on Document, see Document's selectionchange event. See bug 1327098 for firing the event on <input> elements.

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/selectionchange_event