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

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

现在，我在

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

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

我尝试了在stackoverflow中找到的所有可能的解决方案，但没有解决这个问题。我最常尝试此演示页面：

---

有关代码，请访问：

和演示：

---

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

代码：

///将finalText写入文本/输入框
Keyboard.prototype.writeFinalValue=函数（finalText，caretPosition）{
var scrollTop=this.textInputSource.scrollTop；
if（typeof this.textInputSource.selectionStart==“number”&&typeof this.textInputSource.selectionEnd==“number”）{
//非IE浏览器和IE 9
this.textInputSource.value=finalText；
this.textInputSource.value=this.textInputSource.value；
////移动插入符号
//this.textInputSource.selectionStart=caretPosition；
//this.textInputSource.selectionEnd=caretPosition；
}
else if（document.selection&&document.selection.createRange）{
//对于IE版本8之前的版本
var selectionRange=document.selection.createRange（）；
var textInputRange=this.textInputSource.createTextRange（）；
var precingRange=this.textInputSource.createTextRange（）；
var bookmark=selectionRange.getBookmark（）；
textInputRange.moveToBookmark（书签）；
setEndPoint（“EndToStart”，textInputRange）；
var start=precingRange.text.length；
var end=start+selectionRange.text.length；
this.value=finalText；
////移动插入符号
//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；
//移动插入符号
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.moveEnd（'character'，caretPosition）；
range.moveStart（'character'，caretPosition）；
range.select（）；
}
}

谢谢

---

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

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

更新

我试过了，如果文本溢出，它实际上会滚动到文本框的末尾。在您的示例（）中，它似乎也起作用，但只在第二次单击“设置位置”按钮时起作用

// http://plugins.jquery.com/project/PutCursorAtEnd
$（函数（）{
$（'#foo'）.putCursorAtEnd（）；
});

Live链接是问题的一个很好的附件，但也要在问题中发布相关代码。有两个原因。1.人们不应该通过链接来帮助你。2.StackOverflow不仅是您现在的资源，也是其他将来有类似问题的人的资源。外部链接可以被移动、修改、删除等。通过确保问题中包含相关代码，我们可以确保问题（及其答案）在合理的时间内保持有用。我已经为您更正了格式，您的一段文字几乎无法阅读，因为它缩进了四个空格。这意味着StackOverflow的“这是代码”，所以它显示为单间隔，而不是单词包装。。。在键入问题时，请查看右侧的“如何设置格式”框及其下方的预览区域，您可以在其中查看结果。尝试了他们的代码。它不起作用：-（问题是，在我重新编写inputbox内容之前，视图处于1-11位置，但一旦我写了什么，文本就被放置在第11位置，但viewarea显示0-9位置。它应该是滑动的……。从您的链接中，我准确地实现了：

this.setSelectionRange（len，len）；

…但运气不好，因为光标放在那里，但视图区域没有滑动。我不知道它没有“滚动”最后，如果文本框中有溢出的文本。在这个问题上，问题/答案还有一些其他选项，可能会有帮助：我认为这是一个基本的浏览器设计，我没有得到我想要的结果。检查此链接：，在这里键入任何位置，然后按“设置位置”…然后设置位置（按“get position”（获取位置）可轻松验证），但视图区域不会移动，只是您可以尝试的另一个（未测试）想法。如果您首先将焦点设置到文本框的末尾，然后触发一个事件（如keyup），会发生什么情况。模拟了此行为，但没有运气：-|

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

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

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