Move Cursor to the Beginning or END of Input field in JS

# Table of Contents

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

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

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

Here is the HTML for the example.

index.html

Copied!
<!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>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
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();
});

move cursor to end of input

The code for this article is available on GitHub

We used the setSelectionRange() method 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:

selectionStart - a zero-based index of the first selected character.
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 method 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.

# Move the cursor to the END of an input field when a button is clicked

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

Add a click event listener to a button element.
Every time the button is clicked, call the setSelectionRange() method on the input element.
Call the focus() method to move the cursor to the end of the input field.

index.js

Copied!
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();
});

The code for this article is available on GitHub

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

Set the text selection in the input field to the position after its last character.
Focus the element.

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

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

Use the setSelectionRange() method to move the cursor to the beginning of the input field.
Call the focus() method on the input element.
The focus method will move the cursor to the beginning of the element's value.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <input
      type="text"
      id="first_name"
      name="first_name"
      value="Initial value"
    />

    <button id="btn">Move cursor to beginning</button>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const input = document.getElementById('first_name');

// ✅ Move focus to Beginning of input field
input.setSelectionRange(0, 0);
input.focus();

// ✅ Move focus to Beginning of input field on button click
const btn = document.getElementById('btn');

btn.addEventListener('click', function handleClick() {
  input.setSelectionRange(0, 0);
  input.focus();
});

move cursor to beginning of input

The code for this article is available on GitHub

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

The two arguments we passed to the setSelectionRange() method are:

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

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

The focus method 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 beginning of the input's value and focus it.

# Move the cursor to the BEGINNING or an input field on button click

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

Add a click event listener to a button element.
Each time the button is clicked, call the setSelectionRange() method on the input element.
Call the focus() method to move the cursor to the beginning of the input field.

index.js

Copied!
const input = document.getElementById('first_name');

const btn = document.getElementById('btn');

btn.addEventListener('click', function handleClick() {
  input.setSelectionRange(0, 0);
  input.focus();
});

The code for this article is available on GitHub

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

Set the text selection in the input field to the position before its first character.
Focus the element.

# Set the Cursor at the End of Textarea using JavaScript

To set the cursor at the end of a textarea:

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

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <textarea id="message" rows="5" cols="30">Initial text here</textarea>

    <button id="btn">Move cursor to beginning</button>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const textarea = document.getElementById('message');

const end = textarea.value.length;

// ✅ Move focus to End of textarea
textarea.setSelectionRange(end, end);
textarea.focus();

// ✅ Move focus to End of textarea on button click
const btn = document.getElementById('btn');

btn.addEventListener('click', function handleClick() {
  // 👇️ get length right before clicking button
  const end = textarea.value.length;

  textarea.setSelectionRange(end, end);
  textarea.focus();
});

The code for this article is available on GitHub

We used the setSelectionRange() method to set the start and end positions of the current text selection in the textarea element.

The two parameters we passed to the setSelectionRange method are:

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

An index greater than the length of the textarea'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 textarea's value and focus it.

# Set the cursor at the end of a textarea when a button is clicked

To set the cursor at the end of a textarea when a button is clicked:

Add a click event listener to a button element.
Each time the button is clicked, call the setSelectionRange() method on the textarea element.
Call the focus() method to move the cursor to the end of the textarea.

index.js

Copied!
const textarea = document.getElementById('message');

// ✅ Move focus to End of textarea on button click
const btn = document.getElementById('btn');

btn.addEventListener('click', function handleClick() {
  const end = textarea.value.length;

  textarea.setSelectionRange(end, end);
  textarea.focus();
});

The code for this article is available on GitHub

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

Set the text selection in the textarea to the position after its last character.
Focus the element.

Notice that we get the length of the value of the element right when the button is clicked. This ensures that the value in the end variable will always be up to date.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Move Cursor to the Beginning or END of Input field in JS

# Table of Contents

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

# Move the cursor to the END of an input field when a button is clicked

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

# Move the cursor to the BEGINNING or an input field on button click

# Set the Cursor at the End of Textarea using JavaScript

# Set the cursor at the end of a textarea when a button is clicked

# Additional Resources

Borislav Hadzhiev