Javascript:将插入符号移动到最后一个字符

IT技术 javascript word character caret textrange
2021-03-17 16:30:27

我有一个 textarea,当我点击它时,我想将插入符号移动到最后一个字符 Something[caret]

function moveCaret(){
     // Move caret to the last character
}
<textarea onclick="moveCaret();">
     Something
</textarea>

据我所知,这在 TextRange 对象中是可行的,但我真的不知道如何使用它

编辑:我希望只看到纯 javascript 解决方案,所以请不要使用库。

1个回答

以下函数适用于所有主要浏览器,用于文本区域和文本输入:

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

但是,您真的不应该在用户单击 textarea 时执行此操作,因为用户将无法使用鼠标移动插入符号。相反,当 textarea 获得焦点时执行。Chrome 中也存在一个问题,可以按如下方式解决:

完整示例:http : //www.jsfiddle.net/ghAB9/3/

HTML:

<textarea id="test">Something</textarea>

脚本:

var textarea = document.getElementById("test");
textarea.onfocus = function() {
    moveCaretToEnd(textarea);

    // Work around Chrome's little problem
    window.setTimeout(function() {
        moveCaretToEnd(textarea);
    }, 1);
};
typeof el.createTextRange != "undefined" 应该改为 el.createTextRange !== undefined
2021-04-24 16:30:27
如果尚未创建,el.createTextRange 将始终等于 undefined。对于全局变量直接访问您的安全类型检查是必要的,我认为我们在这里不需要它。
2021-04-29 16:30:27
@vsync:我刚刚在 IE 9 中尝试了 jsFiddle 示例,它运行良好。你看到什么问题?
2021-05-09 16:30:27
@petwho:这并不意味着它应该改变,只是有替代方法。此外,typeof检查比主机对象的直接比较更安全,尤其是在 IE 中(例如,请参阅peter.michaux.ca/articles/... 的“功能测试主机对象”部分),尽管在这种情况下,您的直接比较会很好。
2021-05-09 16:30:27