Как установить курсор в конце в TEXTAREA? (не используя jQuery)

есть ли способ установить курсор в конце тега TEXTAREA? Я использую Firefox 3.6, и мне не нужно, чтобы он работал в IE или Chrome. JavaScript в порядке, но кажется, что все связанные ответы здесь используют событие onfocus (), которое кажется бесполезным, потому что, когда пользователь нажимает в любом месте textarea, Firefox устанавливает позицию курсора туда. У меня есть длинный текст для отображения в текстовом поле, чтобы он отображал последнюю часть (что облегчает добавление чего-то в конце).

6 ответов


там может быть много способов, например,

element.focus();
element.setSelectionRange(element.value.length,element.value.length);

http://jsfiddle.net/doktormolle/GSwfW/


прошло много времени с тех пор, как я использовал javascript, не глядя на решение jQuery...

это, как говорится, ваш лучший подход с использованием javascript будет захватить значение в настоящее время в textarea, когда он приходит в фокус и установить значение textarea к захваченному значению. Это всегда работает в jQuery, как:

$('textarea').focus(function() {
    var theVal = $(this).val();
    $(this).val(theVal);
});

в обычном javascript:

var theArea = document.getElementByName('[textareaname]');

theArea.onFocus = function(){
    var theVal = theArea.value;
    theArea.value = theVal;
}

Я могу ошибаться. Немного заржавел.


здесь функция

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

[Demo][источник]


textarea.focus()
textarea.value+=' ';//adds a space at the end, scrolls it into view

var t = /* get textbox element */ ;

t.onfocus = function () { 
    t.scrollTop = t.scrollHeight; 
    setTimeout(function(){ 
      t.select(); 
      t.selectionStart = t.selectionEnd; 
    }, 10); 
}

трюк использует setTimeout для изменения позиции вставки текста (карат)после браузер сделать обработку события фокуса; в противном случае позиция будет установлен наш скрипт и потом сразу в браузер.


(this.jQuery || this.Zepto).fn.focusEnd = function () {
    return this.each(function () {
        var val = this.value;
        this.focus();
        this.value = '';
        this.value = val;
    });
};