Move the Cursor to an Input field using JavaScript

avatar

Borislav Hadzhiev

Sat Jan 08 20222 min read

Move the Cursor to an Input field using JavaScript #

To move the cursor to an input field:

  1. Select the input element.
  2. Call the focus() method on the element.
  3. The focus method sets focus on the element it was called on.

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" /> <button id="btn">Focus input</button> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const input = document.getElementById('first_name'); // ✅ Move focus to input field input.focus(); // ✅ Move focus to input field on button click const btn = document.getElementById('btn'); btn.addEventListener('click', function handleClick() { input.focus(); });

We selected the input field using the document.getElementById() method.

Then, we used the focus method to move the cursor to the input field.

The focus method sets focus on the element the method was called on, if the element can be focused.

If you want to move the cursor to the input field when a button is clicked, add a click event listener to the button element.

index.js
const input = document.getElementById('first_name'); // ✅ Move focus to input field on button click const btn = document.getElementById('btn'); btn.addEventListener('click', function handleClick() { input.focus(); });

In our example, every time the button is clicked, the handleClick() function is invoked, where we call the focus() method on the element.

The default behavior for when an input field is focused is to move the cursor to the beginning of the field, even if there is text in the input element.

To move the cursor to the end of an input element, use the setSelectionRange() method to set the current text selection position to the end of the input field and call the focus() method on the input element.

Here is the HTML for the next example.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <input type="text" id="first_name" name="first_name" value="Some value" /> <button id="btn">Focus input</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.

If you load the page with the example from the code snippet, you will see that even though the input field contains text, we manage to move the cursor to the end of the input's value.
Use the search field on my Home Page to filter through my more than 1,000 articles.