Set the Cursor at the End of Textarea using JavaScript

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 in this article.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </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>

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

We used the setSelectionRange 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.

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

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.

Set the Cursor at the End of Textarea using JavaScript

Set the Cursor at the End of Textarea using JavaScript #

Borislav Hadzhiev