Javascript: Move caret to last character

夙愿已清 提交于 2019-11-26 12:19:08

问题


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.


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


来源:https://stackoverflow.com/questions/4715762/javascript-move-caret-to-last-character

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!