将插入符号移动到焦点上文本区域的末尾

move caret to end of textarea on focus

本文关键字：区域 文本 焦点 插入 符号 移动      更新时间：2023-09-26

我认为这将是一件非常简单的事情，但我无法让它工作。我正在使用以下代码，但没有成功。我知道这在即我正在使用铬中不起作用。这是一个JS小提琴来演示。谢谢

$('#ta').focus(function(){
  this.selectionStart = this.value.length;
});

这是一个跨浏览器和jQuery兼容的解决方案（它支持给定选择器中的多个元素）。

在Chrome 40x，IE 11和FireFox 34x中进行测试

$("textarea").focus(function () {
    for (var i = 0; i < $(this).length; i++) {
        var el = $(this)[i]
        window.setTimeout(function () {
            if (el !== null) {
                if (el.createTextRange) {
                    var range = el.createTextRange();
                    range.move('character', el.value.length);
                    range.select();
                }
                else {
                    if (el.selectionStart || el.selectionStart === 0) {
                        el.focus();
                        el.setSelectionRange(el.value.length, el.value.length);
                    }
                    else {
                        el.focus();
                    }
                }
            }
        }, 1)
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="ta">focus on me</textarea><br />
<textarea id="ta2">focus on me</textarea>

如果您想了解如何修复原始解决方案以使其正常工作，这是您必须做的：

$('#ta').focus(function (e) {
    var element = this;
    setTimeout(function () {
        element.selectionStart = element.value.length;
    }, 1);
});

必须在非常短的延迟后设置位置（在我的情况下，1 毫秒就足够了），因为似乎光标位置设置为您在焦点功能完成后单击的位置，因此您将光标设置为输入的末尾，但发生这种情况后，它会立即放置在用户单击的位置

小提琴：http://jsfiddle.net/zb5uoL3t/

一个快速的

$('#ta').focus(function(){
    moveCursorToEnd(document.getElementById('ta'));
});
function moveCursorToEnd(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();
    }
}

http://jsfiddle.net/9xaxz53x/1/

相关文章：