Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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>
let output = document.getElementById("output");
function moveAtend() {
let name = document.getElementById("name");
name.focus();
name.setSelectionRange(name.value.length, name.value.length);
}
</script>
</html>
Using the selectionStart and selectionEnd properties
The ‘selectionStart’ and ‘selectionEnd’ CSS 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>
let output = document.getElementById("output");
function moveAtend() {
let name = document.getElementById("name");
name.focus();
name.selectionStart = name.value.length;
name.selectionEnd = name.value.length;
}
</script>
</html>
Conclusion
We learned two approaches to putting the cursor at the end of the text value in the input field. In the first approach, we used the setSelectionRange() method; in the second approach, we used the ‘selectionStart’ and ‘selectionEnd’ properties. However, both approaches are almost the same as the setSelectionRange() method takes the ‘selectionStart’ and ‘selection’ end values as a parameter.
6K+ Views
