javascript - 如何自动滚动到textarea

Question

我编写了一个带有文本区域、文本框和按钮的 HTML 表单。单击按钮时，我在文本框中键入的任何内容都将附加到文本区域。现在，我的问题是当文本区域完全填满时，新到达的文本出现在底部，我必须手动向下滚动才能查看此文本。javascript中是否有任何方法可以使到达的文本始终可见而无需向下滚动...请帮助

Answer 1

我不确定这是否是您想要的，但请看一下：

http://jsfiddle.net/yV76p/

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

textarea.onkeyup = function(evt) {
    this.scrollTop = this.scrollHeight;
}

你可以在这里找到它的详细信息：Auto resizing textarea link down jquery

Answer 2

此示例在添加内容文本时增加文本区域的大小；

例子

Javascript

var txt = $('#comments'),
    hiddenDiv = $(document.createElement('div')),
    content = null;

txt.addClass('txtstuff');
hiddenDiv.addClass('hiddendiv common');

$('body').append(hiddenDiv);

txt.on('input', function () {

    content = $(this).val();

    content = content.replace(/\n/g, '<br>');
    hiddenDiv.html(content + '<br class="lbr">');

    $(this).css('height', hiddenDiv.height());

});

txt.trigger('input');

CSS

body {
     margin: 20px;
}

p {
    margin-bottom: 14px;
}

textarea {
    color: #444;
    padding: 5px;
}

.txtstuff {
    resize: none; /* remove this if you want the user to be able to resize it in modern browsers */
    overflow: hidden;
}

.hiddendiv {
    display: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
}

/* the styles for 'commmon' are applied to both the textarea and the hidden clone */
/* these must be the same for both */
.common {
    width: 500px;
    min-height: 50px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    overflow: hidden;
}

.lbr {
    line-height: 3px;
}

Answer 3

为了让 textarea 具有自动滚动功能，请在您尝试查看文本框内容的末尾添加这段代码：

 var console = $('#area');
 console.scrollTop(
 console[0].scrollHeight - console.height());

演示

希望这可以帮助 ：）