Move cursor to the end of input

Serhii Shramko /

How to move the cursor to the beginning or end of an input field using JavaScript:

<!DOCTYPE html>
<html>
  <head>
    <title>Move Cursor to Beginning/End of Input Field</title>
  </head>
  <body>
    <label for="myInput">Type something here:</label>
    <input id="myInput" type="text" value="Hello, World!">

    <button onclick="moveCursorToBeginning()">Move Cursor to Beginning</button>
    <button onclick="moveCursorToEnd()">Move Cursor to End</button>

    <script>
      function moveCursorToBeginning() {
        const input = document.getElementById("myInput");
        input.focus();
        input.setSelectionRange(0, 0);
      }

      function moveCursorToEnd() {
        const input = document.getElementById("myInput");
        const length = input.value.length;
        input.focus();
        input.setSelectionRange(length, length);
      }
    </script>
  </body>
</html>

In this example, we have an input field with an id of myInput and two buttons, each of which calls a JavaScript function when clicked.

Move cursor to beginning

The moveCursorToBeginning function first gets a reference to the input field using getElementById.

It then calls the focus() method to set the input field as the active element and brings it into focus.

Finally, it calls the setSelectionRange method to set the selection range to the beginning of the input field (i.e., from index 0 to index 0).

// Syntax
setSelectionRange(selectionStart, selectionEnd) // 0, 0 moved the cursor to the start

Move cursor to the end

The moveCursorToEnd function works similarly, but instead of setting the selection range to the beginning of the input field, it sets it to the end of the input field by passing in the length of the input field's value as both the start and end index of the selection range.

By using these two functions, you can easily move the cursor to the beginning or end of an input field in JavaScript.