search

Home  >  Article  >  Web Front-end  >  How to position the cursor at the end of text in a text input field using JavaScript?

How to position the cursor at the end of text in a text input field using JavaScript?

王林
王林forward
2023-08-27 14:09:171230browse

如何使用 JavaScript 将光标位置放置在文本输入字段中的文本末尾？

In HTML, input fields are used to get input from the user. Sometimes, we need to get a string or long text message in the input. In these scenarios, the user may need to go to the end of the input field to add more content or messages. So we should set something up so that the user can click on the button and can go to the end of the input field. In this tutorial, we will learn to use JavaScript to position the cursor at the end of text in an input field.

Use setSelectionRange() method

setSelectionRange() method is used to select text in the input field. Two parameters are required to start and end the selection. We can use the setSelectionRange() method to select the last character, placing the cursor at the end of the text.

grammar

Users can use the setSelectionRange() method according to the following syntax to place the cursor at the end of the text. 

input.setSelectionRange(len, len);

In the above syntax, the input is the HTML element that we access in JavaScript. "len" is the length of the input value.

Example

In the example below, we create input fields and buttons. When the user clicks the button, it executes the moveAtend() function.

In JavaScript, we define the moveAtend() function, which accesses the "name" input field. After that, it sets focus on the input field using the focus() method. After that, we use the setSelectionRange() method by passing the length of the input value as two parameters. In the output, the user can click the button and watch it set the cursor position to 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>

Use selectionStart and selectionEnd properties

The "selectionStart" and "selectionEnd" CSS properties are used to select input values ​​in input fields. "selectionStart" takes the index value from where we started the selection, and "selectionEnd" takes the index value where we need to end the text selection.

Here we can set the value of the "selectionStart" and "selectionEnd" properties equal to the text length to place the cursor at the end of the text.

grammar

Users can use the "selectionStart" and "selectionEnd" attributes according to the following syntax to place the 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 the length of its value.

Example

Like the first example, we create the input fields in the example below. In the moveAtend() function, we set the value of the "selectionStart" and "selectionEnd" properties equal to the text length of 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>

in conclusion

We learned two ways to position the cursor at the end of a text value in an input field. In the first method, we used the setSelectionRange() method; in the second method, we used the "selectionStart" and "selectionEnd" properties. However, both methods are almost identical, the setSelectionRange() method takes the "selectionStart" and "selection" end values ​​as parameters.

The above is the detailed content of How to position the cursor at the end of text in a text input field using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html 字符串 len input
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to convert string to number in TypeScript?Next article：How to convert string to number in TypeScript?

Related articles

See more