Skip to main content

How to Move the Cursor to the End or Beginning of an Input Field in JavaScript

When you programmatically focus() an input or textarea element, the browser's default behavior for cursor placement can be inconsistent. For a better user experience, you often need to explicitly control the cursor's position, such as moving it to the very beginning or, more commonly, to the very end of the existing text.

This guide will teach you how to use the setSelectionRange() method to precisely control the cursor position in any input or textarea element. You will learn how to create simple, reusable functions to move the cursor to the start or end of the text.

The Core Method: setSelectionRange()​

The HTMLInputElement.setSelectionRange() method is the key to this task. It allows you to select a range of text within an input or textarea. We can use it to set the cursor's position by defining a selection range of zero length.

input.setSelectionRange(selectionStart, selectionEnd)

where:

  • selectionStart: The index of the first character to be selected.
  • selectionEnd: The index of the character after the last character to be selected.

To simply move the cursor without selecting text, you set selectionStart and selectionEnd to the same value.

note

Important: This method only works on input types that support text selection, such as text, search, url, tel, password, and on <textarea> elements.

Moving the Cursor to the End of an Input​

This is the most common use case. After a user clicks an "edit" button, you want to focus the input and place the cursor at the end of the current text so they can easily append to it.

For example, you want to focus an input and place the cursor after the last character.

<input id="my-input" type="text" value="Initial Value">

The solution is to to move the cursor to the end, so that you set the selection range to the length of the input's value.

/**
 * Moves the cursor to the end of an input or textarea element.
 * @param {HTMLInputElement | HTMLTextAreaElement} el - The input element.
 */
function moveCursorToEnd(el) {
  const len = el.value.length;
  
  // Set the selection range to the end of the text
  el.setSelectionRange(len, len);
  
  // Focus the element to make the cursor visible
  el.focus();
}

// Example Usage:
const myInput = document.getElementById('my-input');
moveCursorToEnd(myInput);
note

Setting both the start and end of the selection to el.value.length creates a collapsed selection (a cursor) right after the last character.

Moving the Cursor to the Beginning of an Input​

Similarly, to move the cursor to the beginning of the text, you set the selection range to the start of the input.

For example, you want to focus an input and place the cursor before the first character.

The solution is to set the selection range to 0.

/**
 * Moves the cursor to the beginning of an input or textarea element.
 * @param {HTMLInputElement | HTMLTextAreaElement} el - The input element.
 */
function moveCursorToStart(el) {
  // Set the selection range to the start of the text
  el.setSelectionRange(0, 0);
  
  // Focus the element
  el.focus();
}

// Example Usage:
const myInput = document.getElementById('my-input');
moveCursorToStart(myInput);

Practical Example: A "Focus and Edit" Button​

This script demonstrates a common UI pattern. A button allows the user to start editing a textarea, and the script helpfully places the cursor at the end of the existing content.

HTML:

<textarea id="user-bio" rows="4" readonly>This is the user's bio. It is currently read-only.</textarea>
<button id="edit-btn">Edit Bio</button>

JavaScript:

const bioTextarea = document.getElementById('user-bio');
const editButton = document.getElementById('edit-btn');

editButton.addEventListener('click', () => {
  // Make the textarea editable
  bioTextarea.readOnly = false;
  
  // Move the cursor to the end and focus
  const len = bioTextarea.value.length;
  bioTextarea.setSelectionRange(len, len);
  bioTextarea.focus();
});

This provides a smooth and intuitive user experience for editing existing content.

Conclusion​

Controlling the cursor position in input fields is a simple but important part of creating a polished user interface.

  • The element.setSelectionRange(start, end) method is the standard tool for this task.
  • To move the cursor to the end, use el.setSelectionRange(el.value.length, el.value.length).
  • To move the cursor to the beginning, use el.setSelectionRange(0, 0).
  • Always call element.focus() after setting the selection range to make the cursor visible and the input active.

Table of Contents