Use JavaScript to Place Cursor At End of Text in Text Input Element

Use JavaScript to place cursor at end of text in text input element

I faced this same issue (after setting focus through RJS/prototype) in IE.
Firefox was already leaving the cursor at the end when there is already a value for the field. IE was forcing the cursor to the beginning of the text.

The solution I arrived at is as follows:

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

This works in both IE7 and FF3 but doesn't work in modern browsers (see comments) as it is not specified that UA must overwrite the value in this case (edited in accordance with meta policy).

put cursor at end of text input's value

This works for me

<input type="text" autofocus value="value text" onfocus="this.value = this.value;"/>

Set focus and cursor to end of text input field / string w. Jquery

You can do this using Input.setSelectionRange, part of the Range API for interacting with text selections and the text cursor:

var searchInput = $('#Search');

// Multiply by 2 to ensure the cursor always ends up at the end;
// Opera sometimes sees a carriage return as 2 characters.
var strLength = searchInput.val().length * 2;

searchInput.focus();
searchInput[0].setSelectionRange(strLength, strLength);

Demo: Fiddle

move cursor to end of input

I found easy solution https://jsfiddle.net/r3yohhc0/1/ , property scrollLeft

input.scrollLeft = input.scrollWidth;

Putting cursor at end of textbox in javascript

You have to focus element AND set caret position

This JSFiddle shows you how it works. jQuery has been used for simplicity in this example, but it can be completely omitted if one desires so. setSelectionRange function is a DOM function anyway.

In general it does this:

input.focus();
input.setSelectionRange(inputValueLength, inputValueLength);

Obtaining input and its value length can be obtained using DOM functionality or using library functions (as in jQuery).

Do we need input value length?

I haven't tested in other browsers but running in Chrome it allows to set a larger than actual position and caret will be positioned at the end. So something like:

input.setSelectionRange(1000,1000);

will work as expected (provided your text is shorter than 1000 characters. :)

Note: This function isn't supported in IE8 and older. All latest versions of most used browsers support it. For older versions of IE resort to text ranges.

How to place cursor at the end of text in div tag with contenteditable

I've found a similar question, and this seems unbelievably complicated.

Set cursor position on contentEditable <div>

Although someone claims something, I used,
Zane Claes's answer, and works as intended.

$.fn.focusEnd = function() {
    $(this).focus();
    var tmp = $('<span />').appendTo($(this)),
        node = tmp.get(0),
        range = null,
        sel = null;

    if (document.selection) {
        range = document.body.createTextRange();
        range.moveToElementText(node);
        range.select();
    } else if (window.getSelection) {
        range = document.createRange();
        range.selectNode(node);
        sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
    tmp.remove();
    return this;
}

cursor at the end of textbox input field

You can try an onclick or onfocus event, which reads the value of the field, then writes it back. When adjusting the text in an active text field, the cursor jumps at the end.

$("#yourtextfield").click(function() {
    var v = $(this).val();
    $(this).val(v);
});

You can try it here: http://jsfiddle.net/inti/uYzVP/

focus html in the end of a input text (not only cursor)

$('#myInput').get(0).scrollLeft = $('#myInput').get(0).scrollWidth;

Use JavaScript to Place Cursor At End of Text in Text Input Element