Javascript: переместить каретку до последнего символа - PullRequest
Новая
       54

Javascript: переместить каретку до последнего символа

17 голосов
/ 17 января 2011

У меня есть текстовая область, и когда я нажимаю на нее, я хочу переместить каретку на последний символ, так что Something[caret]

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

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

Как я знаю, это как-то возможно с объектом TextRange, но я не знаю, как его использовать

РЕДАКТИРОВАТЬ: Я хотел бы видеть только чистые решения javascript, поэтому нет библиотек, пожалуйста.

1 Ответ

40 голосов
/ 17 января 2011

Следующая функция будет работать во всех основных браузерах как для текстовых областей, так и для ввода текста: 

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