Refresh text input to show caret

Question

I have the following fiddle: http://jsfiddle.net/sxAss/

By using the solution posted here I was able to move the caret to the end of the input. The problem that I have is that the input does not refresh to actually show the caret. Instead it shows the beginning of the input. What should I do to actually move the view to the end of the input. I am using Chrome.

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();
    }
}

Answer 1

First focus your input element then call your moveCaretToEnd function

like

$('#button').click(function() {
    $('#input').focus();
    $('#input').val($('#input').val() + 'StackOverflowTest');
    moveCaretToEnd(document.getElementById('input'));
});

Working fiddle