Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to place cursor position at end of text in text input field using JavaScript?
In HTML, the input field is used to take input from the users. Sometimes, we require to take string or long text messages in the input. In these scenarios, users may need to go to the end of the input field to add more content or message. So, we should set up something such that users can click the button, can go to the end of the input field. In this tutorial, we will learn to use JavaScript to place the cursor position at the end of the text in the input field.
Using the setSelectionRange() method
The setSelectionRange() method is used to select the text in the input field. It takes two parameters to start and end the selection. We can select the last character using the setSelectionRange() method to put the cursor at the end of the text.
Syntax
Users can follow the syntax below to use the setSelectionRange() method to put the cursor at the end of the text.
input.setSelectionRange(len, len);
In the above syntax, input is an HTML element that we accessed in JavaScript. The 'len' is the length of the input value.
Example
In the example below, we created the input field and button. When users click the button, it executes the moveAtend() function.
In JavaScript, we defined the moveAtend() function, which accesses the 'name' input field. After that, it uses the focus() method to set focus on the input field. After that, we use the setSelectionRange() method by passing the input value's length as both parameters. In the output, users can click the button and observe that it sets the cursor position at the end of the text.
<html>
<body>
<h3> Using the <i> setSelectionRange() method </i> to move the cursor at the end of the input field in JavaScript </h3>
<input type = "text" id = "name" value = "Shubham">
<button onclick = "moveAtend()"> Move cursor at end </button>
<script>
function moveAtend() {
let name = document.getElementById("name");
name.focus();
name.setSelectionRange(name.value.length, name.value.length);
}
</script>
</body>
</html>
Using the selectionStart and selectionEnd properties
The 'selectionStart' and 'selectionEnd' properties are used to select the input value in the input field. The 'selectionStart' takes the index value from where to start the selection, and 'selectionEnd' takes the index value where we require to end the selection of the text.
Here, we can set values of the 'selectionStart' and 'selectionEnd' properties equal to the text length to put the cursor at the end of the text.
Syntax
Users can follow the syntax below to use the 'selectionStart' and 'selectionEnd' properties to put a cursor at the end of the text.
input.selectionStart = len; input.selectionEnd = len;
In the above syntax, input is an HTML element, and 'len' is its value's length.
Example
As in the first example, we created the input field in the example below. In the moveAtend() function, we set the value of the 'selectionStart' and 'selectionEnd' properties equal to the text length for the 'name' input field.
<html>
<body>
<h3> Using the <i> selectionStart and selectionEnd Properties </i> to move the cursor at the end of the input field in JavaScript </h3>
<input type = "text" id = "name" value = "Shubham">
<button onclick = "moveAtend()"> Move cursor at end </button>
<script>
function moveAtend() {
let name = document.getElementById("name");
name.focus();
name.selectionStart = name.value.length;
name.selectionEnd = name.value.length;
}
</script>
</body>
</html>
Comparison
| Method | Syntax Complexity | Browser Support | Best For |
|---|---|---|---|
setSelectionRange() |
Simple - one method call | Excellent | Quick implementation |
selectionStart/End |
More verbose - two properties | Excellent | Fine-grained control |
Conclusion
Both setSelectionRange() and the selectionStart/selectionEnd properties effectively place the cursor at the end of input text. The setSelectionRange() method is more concise and recommended for most use cases.
12K+ Views
