【问题标题】:Javascript: Move caret to last characterJavascript:将插入符号移动到最后一个字符
【发布时间】:2011-06-10 14:06:34
【问题描述】:

我有一个文本区域,当我点击它时,我想将插入符号移动到最后一个字符,所以Something[caret]

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

据我所知,TextRange 对象在某种程度上可以做到这一点,但我真的不知道如何使用它

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

【问题讨论】:

  • 请不要那样做。如果文本字段做这样的事情,那就烦人了。如果我点击某个位置,我希望光标在这个位置;不是网站开发者喜欢的某个位置。自动选择所有内容,只要在聚焦时立即发生就更容易接受。
  • @ThiefMaster,同意,尽管有时有些奇怪的事情需要微调控制。例如,将虚拟占位符文本视为不存在的占位符 polyfill。

标签: javascript word character caret textrange


【解决方案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 获得焦点时执行此操作。 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);
};

【讨论】:

  • @vsync:我刚刚在 IE 9 中尝试了 jsFiddle 示例,它运行良好。您遇到什么问题?
  • typeof el.createTextRange != "undefined" 应改为 el.createTextRange !== undefined
  • el.createTextRange 如果尚未创建,则始终等于 undefined。对于全局变量直接访问你的安全类型检查是必要的,我认为我们在这里不需要它。
  • @petwho:这并不意味着它应该改变,只是有替代方法。此外,typeof 检查比直接比较主机对象更安全,尤其是在 IE 中(例如,请参阅 peter.michaux.ca/articles/… 的“功能测试主机对象”部分),尽管在这种情况下您可以直接比较。
猜你喜欢
  • 1970-01-01
  • 2015-04-27
  • 2013-02-15
  • 2014-06-15
  • 1970-01-01
  • 2018-12-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多