Question

我写了一个带有文本区域，文本框和按钮的HTML表单。无论我在文本框中输入什么内容，都会在单击按钮时附加到textarea。现在，我的问题是当文本区域被完全填满时，新到达的文本出现在底部，我必须手动向下滚动才能查看此文本。在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

此示例在添加内容文本时增加textarea的大小;

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

Answer 3

为了让textarea具有自动滚动功能，请在您尝试从文本框中访问内容的位置添加此代码：

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

DEMO

希望这会有所帮助：）

如何自动滚动到textarea

3 个答案: