我编写了一个带有文本区域、文本框和按钮的 HTML 表单。单击按钮时,我在文本框中键入的任何内容都将附加到文本区域。现在,我的问题是当文本区域完全填满时,新到达的文本出现在底部,我必须手动向下滚动才能查看此文本。javascript中是否有任何方法可以使到达的文本始终可见而无需向下滚动...请帮助
问问题
3058 次
3 回答
2
我不确定这是否是您想要的,但请看一下:
var textarea = document.getElementById("textarea");
textarea.onkeyup = function(evt) {
this.scrollTop = this.scrollHeight;
}
你可以在这里找到它的详细信息:Auto resizing textarea link down jquery
于 2013-10-25T04:56:07.190 回答
0
此示例在添加内容文本时增加文本区域的大小;
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;
}
于 2013-10-25T05:06:02.367 回答
0
为了让 textarea 具有自动滚动功能,请在您尝试查看文本框内容的末尾添加这段代码:
var console = $('#area');
console.scrollTop(
console[0].scrollHeight - console.height());
希望这可以帮助 :)
于 2013-10-25T05:39:09.707 回答