I have textarea and I want to change text that says what character is after the caret (cursor).
<textarea id="text"></textarea>
<br/>
Character after the caret: <span id="char"></span>
I know how to get caret position. The problem is I don't know what event is invoked when users movet the caret (by typing, pressing arrow keys, clicking, pasting text, cutting text, …).
I don't think there's a built-in event to check that, but you can use a combination of keypress, mousedown, and the other events that can trigger a caret position change, then check for changes to the textarea's selectionStart (which indicates caret position):
const textarea = document.querySelector('textarea');
textarea.addEventListener('keypress', checkcaret); // Every character written
textarea.addEventListener('mousedown', checkcaret); // Click down
textarea.addEventListener('touchstart', checkcaret); // Mobile
textarea.addEventListener('input', checkcaret); // Other input events
textarea.addEventListener('paste', checkcaret); // Clipboard actions
textarea.addEventListener('cut', checkcaret);
textarea.addEventListener('mousemove', checkcaret); // Selection, dragging text
textarea.addEventListener('select', checkcaret); // Some browsers support this event
textarea.addEventListener('selectstart', checkcaret); // Some browsers support this event
let pos = 0;
function checkcaret() {
const newPos = textarea.selectionStart;
if (newPos !== pos) {
console.log('change to ' + newPos);
pos = newPos;
}
}<textarea></textarea>There is an event for when the selection changes, selectionchange.
The selectionchange event is a global event, so listeners can be added on any element, although there is an experimental feature where event listeners on input elements and textarea elements only listen to changes in selection within that element. The experimental version is currently only supported in Firefox.
The selection can then be accessed through getSelection(). In a few browsers this will return undefined if the selection is inside an input or textarea element, so if getSelection() returns undefined, selectionStart and selectionEnd would work.
Example of the global selectionchange event:
let counter = 0;
document.addEventListener("selectionchange", function () {
document.querySelector("#counter").textContent = ++counter;
})<textarea>sample text</textarea>
<p>sample text in a paragraph</p>
<p contenteditable>a paragraph you can edit</p>
<p><code>selectionchange</code> events: <span id="counter">0</span></p>