Автоматическая прокрутка ‹textarea› с помощью Javascript

У меня есть это текстовое поле, которое показывает введенный текст, но когда количество строк превышает размер и ширину текстового поля, пользователь должен прокрутить вниз, чтобы увидеть, что они ввели последним.

Я бы хотел, чтобы текстовое поле устанавливалось внизу каждый раз, когда нажимается кнопка ввода.

Я пробовал следующее, но я не могу заставить его работать:

function inputKeyDown(evt, input) {    
    if (evt.keyCode == 13) {    
        var textarea = document.getElementById("textarea");  
        textarea.value += "\n" + ">" + " " + input.value;  
        input.value = "";  
        return false;       
    }  
    var elem = document.getElementById('textarea');  
    elem.scrollTop = elem.scrollHeight;    
}

а затем я вызываю функцию keyDown в <input onKeyDown="return keyDown(event, this);" ...>

Любая идея, почему нет workie?


javascript textarea autoscroll
person Big Mo Fo    schedule 09.09.2010    source источник
comment
Прочтите поле How to format рядом с формой вопроса, чтобы узнать, как правильно форматировать код и встроенный код.   -  person Felix Kling    schedule 10.09.2010

Ответы (2)


arrow_upward
4
arrow_downward

Попробуйте следующее:

textarea.scrollTop = textarea.scrollHeight - textarea.clientHeight;
person Community    schedule 10.09.2010

arrow_upward
0
arrow_downward

Это зависит от того, какой ввод вы просматриваете, но принудительное возвращение курсора в нижнюю часть потенциально может быть серьезной проблемой удобства использования. Если вам нужна текстовая область, которая автоматически расширяется, взгляните на существующие решения, такие как это jQuery плагин

Я не совсем уверен, что это то, что вы хотите, но посмотрите это: http://jsfiddle.net/yV76p/

var textarea = document.getElementById("textarea");

textarea.onkeyup = function(evt) {
    this.scrollTop = this.scrollHeight;
}
person Yi Jiang    schedule 10.09.2010
comment
Привет, Йи, решение, на которое вы ссылаетесь, не показывает расширение текстовой области. Вы можете проверить правильность кода - person Helen Neely; 18.02.2012
comment
@HelenNeely Внимательно прочитайте, решение отвечает на вопрос ОП о том, как заставить текстовую область прокручиваться вниз при каждом нажатии клавиши. Он не расширяет текстовое поле автоматически, так как это не то, чего хотел OP, но если вы хотите, вы можете посмотреть ссылку на плагин jQuery. - person Yi Jiang; 18.02.2012