随着用户不断输入，动态增加文本区域的高度（没有滚动条）答案

【问题标题】：Increase the textarea height (without the scroll bar) dynamically as the user keeps typing随着用户不断输入，动态增加文本区域的高度（没有滚动条）
【发布时间】：2013-02-26 05:24:07
【问题描述】：

我的应用程序有一个带有以下 css 的 textarea (html) 字段

.textareaCss{overflow: auto;width:500px; height:15px; margin:0; padding:5px; margin-top:4px; margin-bottom:5px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; border:#d9d9d9 solid 1px;color: #999;}

现在的效果是，如果用户的评论增长到输入的内容占用的空间超过了 15px 的高度可以容纳的空间，那么滚动条出现并且用户看不到第一行，如图所示

文本区域的高度是否可能会增长，以至于始终可以看到整个内容。请注意：无论如何，字符限制是 1000。

【问题讨论】：

http://stackoverflow.com/questions/2948230/auto-expand-textarea的可能重复
我不久前创建了一个插件，它可以满足您的需求以及更多功能：github.com/ajcrites/jquery.supertextarea -- 效果不错
也许这有帮助：impressivewebs.com/demo-files/textarea-auto-resize

标签： javascript jquery css

【解决方案1】：

答案如下 1.下载插件“autogrow.js”Autogrow js from GitHub

然后将其添加到您的代码中并分别给出参考。

然后添加如下代码

$(function() {
   $('#txtMeetingAgenda').autogrow();
});

【讨论】：

@GabrielRyanNahmias - 是的，但我似乎只能在 23 小时后。所以我稍后会做......无论如何感谢您的指导...... :)

【解决方案2】：

您可以使用 jQuery 来完成此操作。我认为 change 事件对你有用。您所要做的就是在更改时重置高度。

例如：

$('.textareaCss').on('keyup', function(){
    $(this).css('height', '100%');
});

我没有对此进行测试，但它应该会为您指明正确的方向。

【讨论】：

可能是“onkeyup”，而不是“onchange”，如果有的话
我同意，我不确定 onchange 是在每次击键后触发还是仅在焦点离开后触发。键是这里更好的选择。回复已编辑。
@Mike 感谢您的快速回复，（不确定我是否在您的回答中遗漏了某些内容）但是这样一来，当您单击它而不是用户到达时，textarea 就会展开新队。无论如何，我通过一个名为“autogrow.js”的插件得到了答案 [github.com/jerryluk/jquery.autogrow] 代码如下，1. 给插件提供参考并添加如下代码，$(function() { $(' #txtMeetingAgenda').autogrow(); });
只需将有效链接添加到上述存储库（最后一个包含结束括号）：github.com/jerryluk/jquery.autogrow