修改文本框内容后无法将光标设置在末尾

Question

我必须编写一个代码将文本输入转换为我的语言（孟加拉语）。为此，我检测每个击键，如果它落在 AZ 或 0-9 边界内，我编写相应的代码，最后将光标设置到特定位置。

现在，我在 类型元素中遇到问题，因为我的光标位置正确，我写入正确的位置，但问题是：

考虑当您键入一个字符时，文本框中的可见区域仅包含 10 个字符。在这种情况下，所需的输出是：在我将修改后的值重新写入第 11 个位置的文本框后，输入框应显示位置：1 到 11 并且光标应放置在第 11 个位置......但就我而言，可见区域保持在第 0 到第 10 个字符位置（我的意思是最初的样子）

我已经尝试了在 stackoverflow 中找到的所有可能的解决方案，但没有解决这个问题。我最常尝试这个演示页面： http://demo.vishalon.net/getset.htm

---

代码可以在以下位置找到：

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

和演示：

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

---

请帮我在顶部编写 writeFinalValue 函数HTML部分，这样问题就解决了。

代码：

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

谢谢。

注意：我需要 Firefox/Chrome 的建议，主要是因为 Internet Explorer 不是我关心的问题。

Answer 1

到目前为止，我见过的在文本框末尾设置焦点/光标的最可靠的跨浏览器解决方案是 jQuery PutCursorAtEnd 插件。我建议您使用这个插件来解决这个问题。

更新

我已经尝试过，如果文本溢出，它实际上会滚动到文本框的末尾。在您的示例（http://jsbin.com/unejup/6）中，它似乎也可以工作，但是仅适用于第二次单击“设置位置”按钮。

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

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