In this article, we are going to learn about how to place the cursor at the end of the text in a text input element using JavaScript. At first, we are going to create a text input box where some value will be given and a button to place the cursor at the end. We can place the cursor at the end of the text in a text input element by using different JavaScript functions.
Approach
The JavaScript functions that are used are:
- HTMLInputElement.setSelectionRange(): The HTMLInputElement.setSelectionRange() is a method that sets the start and end positions of the current text selection in an <input> or <textarea> element.
- Element.createTextRange(): It provides us with a selected text range in an input form. A caret is also known as a text cursor which is an indicator on the screen to indicate where the text is to be inserted.
- TextRange.collapse(): It helps to move the caret to the beginning or end of the current range.
- TextRange.moveEnd(): It helps to move the end of the range by a specified number of units.
- TextRange.moveStart(): It moves the start of the range by a specified number of units.
Example: This example shows the above-explained approach.
HTML
<!DOCTYPE html><html>
<body>
<center>
<h1>Put Cursor at End of Input</h1>
<!-- Creating an Input Text Box and
the button to move cursor at the
end of the text-->
<input id="idText" type="text"
size="70" value="Cursor at the End">
<button onclick="PosEnd(idText);">
Put Cursor at end of Text
</button>
</center>
<script>
/* Creating a function called PosEnd
in JavaScript to place the cursor
at the end */
function PosEnd(end) {
let len = end.value.length;
// Mostly for Web Browsers
if (end.setSelectionRange) {
end.focus();
end.setSelectionRange(len, len);
} else if (end.createTextRange) {
let t = end.createTextRange();
t.collapse(true);
t.moveEnd('character', len);
t.moveStart('character', len);
t.select();
}
}
</script>
</body>
</html>
|
Output: