如何自动滚动到textarea答案

【问题标题】：how to give auto scroll to textarea如何自动滚动到textarea
【发布时间】：2013-10-25 04:49:54
【问题描述】：

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

【问题讨论】：

这可以通过 javascript 或 jquery 实现，您的浏览器不知道您要查看此文本
How to have a textarea to keep scrolled to the bottom when updated的可能重复

标签： javascript html

【解决方案1】：

我不确定这是否是你想要的，但看看这个：

http://jsfiddle.net/yV76p/

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

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

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

【讨论】：

【解决方案2】：

此示例会随着内容文本的添加而增加文本区域的大小；

Example

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

【讨论】：

【解决方案3】：

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

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

DEMO

希望这会有所帮助:)

【讨论】：