To place the cursor at the end of the text in the text input element, use JavaScript.

Problem

What is the best (and, I assume, simplest) method to use JavaScript to place the cursor at the end of the content in an input text element after the element has been given focus?

Asked by Peanut

Solution #1

In most browsers, there’s a simple way to make it work.

this.selectionStart = this.selectionEnd = this.value.length;

A more inclusive answer, however, looks more like this due to the *quirks of a few browsers.

setTimeout(function(){ that.selectionStart = that.selectionEnd = 10000; }, 0);

jQuery is used (to set the listener, although it isn’t required otherwise)

Vanilla JS is used (borrowing addEvent function from this answer)

The focus event in Chrome triggers before the cursor is pushed into the field, which messes up my easy approach. There are two options for resolving this:

In addition, @vladkras pointed out that some older versions of Opera calculate the length improperly when there are spaces. You can do this by using a large number that is larger than your string.

Answered by Gary

Solution #2

In IE, I had the identical problem (after adjusting attention via RJS/prototype). When there is already a value for the field, Firefox leaves the cursor at the end. IE was forcing the cursor to the beginning of the text.

The following is the answer I came up with:

<input id="search" type="text" value="mycurrtext" size="30" 
       onfocus="this.value = this.value;" name="search"/>

This works in both Internet Explorer 7 and Firefox 3.

Answered by Mike Berrow

Solution #3

Try this, it’s worked for me in the past:

//input is the input element

input.focus(); //sets focus to element
var val = this.input.value; //store the value of the element
this.input.value = ''; //clear the value of the element
this.input.value = val; //set that value back.  

The input must first have attention in order for the cursor to move to the end; after the value is changed, the pointer will move to the end. It won’t change on Chrome if you keep the.value the same.

Answered by chenosaurus

Solution #4

After hacking around with this a bit, I found the best way was to use the setSelectionRange function if the browser supports it; if not, revert to using the method in Mike Berrow’s answer (i.e. replace the value with itself).

In case we’re in a vertically scrollable textarea, I’m also setting scrollTop to a high value. (It appears that using an arbitrary high value is more dependable than using $.) (this). In Firefox and Chrome, use the height() function.)

It’s a jQuery plugin that I created. (If you don’t use jQuery, I’m confident you’ll be able to get the gist.)

I tested in Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Firefox 3.5.5, Google Chrome 3.0, Safari 4.0.4, and Opera 10.00.

The PutCursorAtEnd plugin is accessible on jquery.com. The code for release 1.0 is as follows for your convenience:

// jQuery plugin: PutCursorAtEnd 1.0
// http://plugins.jquery.com/project/PutCursorAtEnd
// by teedyay
//
// Puts the cursor at the end of a textbox/ textarea

// codesnippet: 691e18b1-f4f9-41b4-8fe8-bc8ee51b48d4
(function($)
{
    jQuery.fn.putCursorAtEnd = function()
    {
    return this.each(function()
    {
        $(this).focus()

        // If this function exists...
        if (this.setSelectionRange)
        {
        // ... then use it
        // (Doesn't work in IE)

        // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
        var len = $(this).val().length * 2;
        this.setSelectionRange(len, len);
        }
        else
        {
        // ... otherwise replace the contents with itself
        // (Doesn't work in Google Chrome)
        $(this).val($(this).val());
        }

        // Scroll to the bottom, in case we're in a tall textarea
        // (Necessary for Firefox and Google Chrome)
        this.scrollTop = 999999;
    });
    };
})(jQuery);

Answered by teedyay

Solution #5

<script type="text/javascript">  
    function SetEnd(txt) {  
      if (txt.createTextRange) {  
       //IE  
       var FieldRange = txt.createTextRange();  
       FieldRange.moveStart('character', txt.value.length);  
       FieldRange.collapse();  
       FieldRange.select();  
       }  
      else {  
       //Firefox and Opera  
       txt.focus();  
       var length = txt.value.length;  
       txt.setSelectionRange(length, length);  
      }  
    }   
</script>  

This function works for me in IE9, Firefox 6.x, and Opera 11.x

Answered by Hallgeir Engen

Post is based on https://stackoverflow.com/questions/511088/use-javascript-to-place-cursor-at-end-of-text-in-text-input-element