Question

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

现在，我在<input type="textbox" />类型元素中遇到问题，因为我的光标位置正确，我写入正确的位置，但问题是：

考虑一种情况，您键入的字符只是文本框中的可见区域仅为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/

请帮我在HTML部分的顶部编写writeFinalValue函数，以便解决此问题。

代码：

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

感谢。

N.B。我需要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" />

修改文本框内容后，无法在最后设置光标

1 个答案: