JavaScript：将光标移动到最后一个字符

Question

我有一个文本域，当我点击它时，我希望把插入符移到最后一个字符，以便得到如下的效果： Something[caret]

function moveCaret(){
     // Move caret to the last character
}

<textarea onclick="moveCaret();">
     Something
</textarea>

据我所知，可以使用TextRange对象实现这一点，但我不太清楚如何使用它。

编辑：我只想看到纯JavaScript解决方案，所以请不要使用任何库。

- Adam Halasz

---

请不要这样做。如果文本框如此行事，那就烦死人了。如果我在特定位置单击，我希望光标在该位置，而不是在站点开发者所喜欢的某个位置。自动选择所有内容在聚焦后立即发生则更为可接受。 - ThiefMaster

@ThiefMaster，同意，尽管有时候会有一些奇怪的事情需要精细控制。例如，一个占位符polyfill，将虚拟占位符文本视为不存在。 - KyleMit

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

然而，当用户点击文本区域时，您真的不应该这样做，因为用户将无法使用鼠标移动插入符号。相反，应该在文本区域获得焦点时执行此操作。在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);
};

- Tim Down

---

@vsync：我刚在IE 9中尝试了jsFiddle的例子，它能正常工作。你遇到什么问题了？ - Tim Down

应将 typeof el.createTextRange != "undefined" 更改为 el.createTextRange !== undefined。 - Khanh Tran

如果尚未创建el.createTextRange，则其始终等于undefined。对于全局变量的直接访问，需要进行安全类型检查，我认为我们在这里不需要它。 - Khanh Tran

@petwho：这并不意味着它应该被更改，只是有另一种方法。此外，对于宿主对象来说，typeof检查比直接比较更安全，特别是在IE中（例如，请参见http://peter.michaux.ca/articles/feature-detection-state-of-the-art-browser-scripting的“Feature Testing a Host Object”部分），尽管在这种情况下，您的直接比较也可以。 - Tim Down