Move the Cursor to the End of an Input field using JS

avatar

Borislav Hadzhiev

Sat Jan 08 20222 min read

banner

Photo by Maxim Shaheen

Move the Cursor to the End of an Input field using JS #

To move the cursor to the end of an input field:

  1. Use the setSelectionRange() method to set the current text selection position to the end of the input field.
  2. Call the focus() method on the input element.
  3. The focus method will move the cursor to the end of the input element's value.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <input type="text" id="first_name" name="first_name" value="Initial value" /> <button id="btn">Move cursor to end</button> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const input = document.getElementById('first_name'); const end = input.value.length; // ✅ Move focus to END of input field input.setSelectionRange(end, end); input.focus(); // ✅ Move focus to END of input field on button click const btn = document.getElementById('btn'); btn.addEventListener('click', function handleClick() { // 👇️ get length right before clicking button const end = input.value.length; input.setSelectionRange(end, end); input.focus(); });

We used the setSelectionRange to set the start and end positions of the current text selection in the input element.

The two parameters we passed to the setSelectionRange method are:

  1. selectionStart - a zero-based index of the first selected character.
  2. selectionEnd - a zero-based index of the character after the last selected character.

An index greater than the length of the input's value points to the end of the value.

The last step is to call the focus() method on the element.

The focus element moves the cursor to the element the method was called on.

The idea is to not select any text at all, but move the cursor to the end of the input's value and focus it.

To move the cursor to the end of the input field when a button is clicked:

  1. Add a click event listener to a button element.
  2. Each time the button is clicked, call the setSelectionRange() method on the input element.
  3. Call the focus() method to move the cursor to the end of the input field.
index.js
const input = document.getElementById('first_name'); const btn = document.getElementById('btn'); btn.addEventListener('click', function handleClick() { // 👇️ get length right before clicking button const end = input.value.length; input.setSelectionRange(end, end); input.focus(); });

Every time the button is clicked, the handleClick function is invoked, where we:

  1. Set the text selection in the input field to the position after its last character.
  2. Focus the element.
Use the search field on my Home Page to filter through my more than 1,000 articles.