Skip to content
Related Articles

Related Articles

Improve Article

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

  • Difficulty Level : Medium
  • Last Updated : 05 Jan, 2021
Geek Week

In this article, we are going to learn about how to place the cursor at 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 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:

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) {
            var len = end.value.length;
              
            // Mostly for Web Browsers
            if (end.setSelectionRange) {
                end.focus();
                end.setSelectionRange(len, len);
            } else if (end.createTextRange) {
                var t = end.createTextRange();
                t.collapse(true);
                t.moveEnd('character', len);
                t.moveStart('character', len);
                t.select();
            }
        }
    </script>
</body>
  
</html>

Output:

  • Before clicking the button:
  • After clicking the button:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :