Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Medium
  • Last Updated : 05 Jan, 2021

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.


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.



<!DOCTYPE html>
        <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
        /* 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.setSelectionRange(len, len);
            } else if (end.createTextRange) {
                var t = end.createTextRange();
                t.moveEnd('character', len);
                t.moveStart('character', len);


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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!