Unable to set cursor at end after modifying textbox content

Question

I have to write a code which will convert text input to my language (Bangla). For this, I detect every keystroke, if it falls within A-Z or 0-9 boundary I write corresponding code and finally I set the cursor to the specific position.

Now, I am having problem in <input type="textbox" /> type element because I get the cursor position correct, I write into correct position but the problem is:

Consider a case where you typed a character where the visible area in the textbox is for 10 character only. In this case, the desired output is: after I re-write my modified value into the textbox at 11th position inputbox should show position: 1 to 11 and cursor should be placed in 11th position.......But in my case, the visible area remains at 0 to 10th character position (i mean initially as it was)

I have tried every possible solution I found in stackoverflow but did not solved this problem. I tried this demo page most: http://demo.vishalon.net/getset.htm

---

The code can be found at:

http://jsbin.com/abexeq/3/edit

and demo:

http://jsbin.com/abexeq/3/

---

Please help me to write the writeFinalValue function at top of the HTML portion so that this problem is solved.

Code:

/// <summary>Write finalText to the text/input box</summary>
Keyboard.prototype.writeFinalValue = function (finalText, caretPosition) {

    var scrollTop = this.textInputSource.scrollTop;

    if (typeof this.textInputSource.selectionStart == "number" && typeof this.textInputSource.selectionEnd == "number") {
        // Non-IE browsers and IE 9
        this.textInputSource.value = finalText;

        this.textInputSource.value = this.textInputSource.value;
        //        // Move the caret
        //        this.textInputSource.selectionStart = caretPosition;
        //        this.textInputSource.selectionEnd = caretPosition;
    }
    else if (document.selection && document.selection.createRange) {
        // For IE up to version 8
        var selectionRange = document.selection.createRange();
        var textInputRange = this.textInputSource.createTextRange();
        var precedingRange = this.textInputSource.createTextRange();
        var bookmark = selectionRange.getBookmark();
        textInputRange.moveToBookmark(bookmark);
        precedingRange.setEndPoint("EndToStart", textInputRange);
        var start = precedingRange.text.length;
        var end = start + selectionRange.text.length;

        this.value = finalText;

        //        // Move the caret
        //        textInputRange = this.createTextRange();
        //        textInputRange.collapse(true);
        //        textInputRange.move("character", start - (this.textInputRange.value.slice(0, start).split("\r\n").length - 1));
        //        textInputRange.select();
    }

    this.textInputSource.focus();
    this.textInputSource.scrollTop = scrollTop;

    // move caret
    if (this.textInputSource.setSelectionRange) {
        this.textInputSource.setSelectionRange(caretPosition, caretPosition);
//        this.textInputSource.value = this.textInputSource.value;
    }
    else if (this.textInputSource.createTextRange) {
        var range = this.textInputSource.createTextRange();
        range.collapse(true);
        range.moveEnd('character', caretPosition);
        range.moveStart('character', caretPosition);
        range.select();
    }
}

Thanks.

N.B. I need suggestion for Firefox/Chrome mainly because Internet Explorer is not my concern.

Answer 1

The most reliable cross-browser solution I've seen to set the focus/cursor at the end of a textbox so far, is the jQuery PutCursorAtEnd plugin. I would recommend you to go with this plugin to solve this issue.

Update

I've tried it out and it actually is scrolling to the end of the textbox if the text is overflowing. In your example (http://jsbin.com/unejup/6) it seems also to work, but only for the second click on the "Set position" button.

<script>
// http://plugins.jquery.com/project/PutCursorAtEnd
$(function () {
    $('#foo').putCursorAtEnd();
});
</script>

<input type="text" id="foo" value="abcdefghijklmnopqrstuvwxyz" />