Open In App
Related Articles

How to place cursor position at end of text in text input field using JavaScript ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

In this article, we are going to learn about how to place the cursor at the end of the text in a text input element using JavaScript.  At first, we are going to create a text input box where some value will be given and a button to place the cursor at the end. We can place the cursor at the end of the text in a text input element by using different JavaScript functions.

Approach

The JavaScript functions that are used are:

  • HTMLInputElement.setSelectionRange(): The HTMLInputElement.setSelectionRange() is a method that sets the start and end positions of the current text selection in an <input> or <textarea> element.
  • Element.createTextRange(): It provides us with a selected text range in an input form. A caret is also known as a text cursor which is an indicator on the screen to indicate where the text is to be inserted.
  • TextRange.collapse(): It helps to move the caret to the beginning or end of the current range.
  • TextRange.moveEnd(): It helps to move the end of the range by a specified number of units.
  • TextRange.moveStart(): It moves the start of the range by a specified number of units.

Example: This example shows the above-explained approach.

HTML

<!DOCTYPE html>
<html>
 
<body>
    <center>
        <h1>Put Cursor at End of Input</h1>
 
        <!-- Creating an Input Text Box and
            the button to move cursor at the
            end of the text-->
        <input id="idText" type="text"
        size="70" value="Cursor at the End">
 
        <button onclick="PosEnd(idText);">
            Put Cursor at end of Text
        </button>
    </center>
    <script>
        /* Creating a function called PosEnd
         in JavaScript to place the cursor
         at the end */
        function PosEnd(end) {
            let len = end.value.length;
 
            // Mostly for Web Browsers
            if (end.setSelectionRange) {
                end.focus();
                end.setSelectionRange(len, len);
            } else if (end.createTextRange) {
                let t = end.createTextRange();
                t.collapse(true);
                t.moveEnd('character', len);
                t.moveStart('character', len);
                t.select();
            }
        }
    </script>
</body>
 
</html>

                    

Output:



Last Updated : 13 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads