当内容大于输入字段（在Chrome中）时，如何将光标/尖号移动到输入字段中的最后一个字符？

Question

What's the current situtation:

I've successfully get this working (don't ask, stupid feature request) in all browsers:

1. User clicks into input field (that has value content)
2. The cursor jumps right after the last character of the input's content

See a working JSfiddle demo here (there are different possibilites to implement this btw).

HTML

<input id="test" value="Something" />

JS

function moveCaretToEnd(el) {
    if (typeof el.selectionStart == "number") {
        el.selectionStart = el.selectionEnd = el.value.length;
    } else if (typeof el.createTextRange != "undefined") {
        el.focus();
        var range = el.createTextRange();
        range.collapse(false);
        range.select();
    }
}

var textarea = document.getElementById("test");
textarea.onfocus = function() {
    moveCaretToEnd(this);

    // Work around Chrome's little problem
    textarea.onmouseup = function() {
    // Prevent further mouseup intervention
    moveCaretToEnd(this);
    textarea.onmouseup = null;
    return false;
    };
};    

What I want to reach and what's blocking:

This does not work anymore in Chrome 35 when the input field's content is LARGER than the input field itself in as Chrome does not "scroll" to the end of the content. It's known that Chrome has problems with input field and JS (this is why there's a Chrome workaround, but it still does not work like expected). It works perfectly in Firefox 30. I want this to work also when the content is larger than the input field.

Questions

Why does this not work under the described circumstances ? A possible fix would also be nice.

Answer 1

I think I solved it like that (quick & dirty). See the full JSFiddle here .

HTML

<input value="1111111111111111111111111222222222" id="test" />

JS

var elem = document.getElementById('test');
elem.focus();
elem.value = "1111111111111111111111111222222222";
elem.scrollLeft = elem.scrollWidth;