Question

我不太确定如何提出我的问题。实际上我有一个textarea和一个按钮，如果我单击按钮它将在textarea中显示一些文本，然后用户需要输入更多的文本。我喜欢有一个动态textarea（即textarea的高度将根据输入的内容而改变）所以我为它编码。

我的代码运行正常。但是当用户输入一些文本时，他们无法看到他们输入的确切行。

只有当textarea接近屏幕的末尾时才会出现此问题。（不幸的是我需要将textarea放在那里。所以我在这里给了一些<br>标签来将textarea移动到屏幕的末尾）

以下是DEMO

我的代码来了：

<script>
function textAreaAdjust(o) {
    o.style.height = "1px";
    o.style.height = (25+o.scrollHeight)+"px";
    $("#text").focus();
}
function click1()
{

    document.getElementById('text').value="Stack Overflow is a privately held website, the flagship site of the Stack Exchange Network,[5][6] created in 2008 by Jeff Atwood and Joel Spolsky,[7][8] as a more open alternative to earlier Q&A sites such as Experts Exchange. The name for the website was chosen by voting in April 2008 by readers of Coding Horror, Atwood's popular programming blog.[9]";
    textAreaAdjust(document.getElementById('text'));
    $("#text").focus();
}
</script>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden" id="text"></textarea>
<input type="button" onClick="click1()">
</body>
</html>

请提出任何建议。

Answer 1

我已更新your fiddle

我添加了

$(window).scrollTop($('#text').height() + $('#text').offset().top);

基本上滚动到textarea位置的底部。

Answer 2

你可以使用css

将textarea放在屏幕的末尾

 textarea { 
    position: absolute,
    bottom: 0px;
    left: 0px;
 }

我更新了您的Fiddle：

在动态更改textarea中输入文本时出现问题

2 个答案: