在动态更改的文本区域中输入文本时遇到问题答案

【问题标题】：trouble in entering text in dynamically changing textarea在动态更改的文本区域中输入文本时遇到问题
【发布时间】：2015-02-12 22:49:58
【问题描述】：

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

我的代码运行良好。但是当用户输入一些文本时，他们看不到他们正在输入的确切行。

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

这里是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>

请给点建议。

【问题讨论】：

你的意思是文本区域应该从顶部扩展？
@jQuery.PHP.Magento.com 没错...
@treegarden 它的工作原理相同。从o.style.height 中删除 25 个像素没有任何区别。
@jQuery.PHP.Magento.com 但是我怎样才能做到这样呢？
你看到这个问题了吗？ stackoverflow.com/questions/17772260/textarea-auto-height

标签： javascript jquery html css

【解决方案1】：

我已经更新your fiddle

我加了

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

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

【讨论】：

【解决方案2】：

您可以使用 css 将 textarea 放在屏幕的末尾

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

我已经更新了你的Fiddle:

【讨论】：