Sometimes, we want to get caret position in HTML input with JavaScript
In this article, we’ll look at how to get caret position in HTML input with JavaScript.
How to get caret position in HTML input with JavaScript?
To get caret position in HTML input with JavaScript, we listen to the keydown event.
For instance, we write
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
window.addEventListener("load", () => {
const [input] = document.getElementsByTagName("input");
input.addEventListener("keydown", (e) => {
console.log("Caret position: ", e.target.selectionStart);
});
});
</script>
<title>Test</title>
</head>
<body>
<input type="text" />
</body>
</html>
to add an input in the body element.
Then we get the input in the load event listener with getElementsByTagName.
Then we call input.addEventListener with 'keydown' to listen to the keydown event which is emitted as we type.
And then we get the current caret position with e.target.selectionStart.
Conclusion
To get caret position in HTML input with JavaScript, we listen to the keydown event.
