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

发布于 2024-10-12 14:07:21 字数 452 浏览 2 评论 0原文

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

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

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

据我所知，这在某种程度上可以通过 TextRange 对象实现，但我真的不知道知道如何使用它

编辑：我希望只看到纯JavaScript解决方案，所以不要使用库。

原文

I have a textarea and when I click in it I want to move the caret to the last character so Something[caret]

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

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

As I know this is somehow possible with the TextRange object, but I don't really know how to use it

EDIT: I would love to see only pure javascript solutions so no libraries please.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

初雪 2024-10-19 14:07:21

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

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

The following function will work in all major browsers, for both textareas and text inputs:

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

However, you really shouldn't do this whenever the user clicks on the textarea, since the user will not be able to move the caret with the mouse. Instead, do it when the textarea receives focus. There is also a problem in Chrome, which can be worked around as follows:

Full example: http://www.jsfiddle.net/ghAB9/3/

HTML:

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

Script:

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

    // Work around Chrome's little problem
    window.setTimeout(function() {
        moveCaretToEnd(textarea);
    }, 1);
};

回复收藏 0 原文

~没有更多了~