javascript 随着用户不断输入，动态增加 textarea 高度（没有滚动条）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15081949/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Increase the textarea height (without the scroll bar) dynamically as the user keeps typing
提问by ismail baig
My application has a textarea (html) field with the following css
我的应用程序有一个带有以下 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;}
Now the effect is, if the user's comment grows such that the content typed is occupying more space than what height of 15px can accomodat, then the scroll bar appears and user cant see the first line as shown
现在的效果是，如果用户的评论增长使得输入的内容占用的空间超过 15px 可以容纳的高度，则滚动条出现并且用户看不到第一行，如图所示
Is it possible that the height of the textarea grows such that the whole content is always seen. PleaseNote: Anyhow the limit of characters is 1000.
是否有可能 textarea 的高度增长，以便始终可以看到整个内容。请注意：无论如何，字符的限制是 1000。
回答by ismail baig
The answer is as follows 1. Download the pluging "autogrow.js" Autogrow js from GitHub
答案如下1.从GitHub下载插件“autogrow.js”Autogrow js
And then add it to your code and give the reference respectively.
然后将其添加到您的代码中并分别给出参考。
Then add the code as below
然后添加如下代码
$(function() {
$('#txtMeetingAgenda').autogrow();
});
回答by Mike
You could use jQuery to accomplish this. I think the change event will work for you. All you have to do is reset the height on change.
您可以使用 jQuery 来完成此操作。我认为 change 事件对你有用。您所要做的就是在更改时重置高度。
For example:
例如：
$('.textareaCss').on('keyup', function(){
$(this).css('height', '100%');
});
I haven't tested this, but it should point you in the right direction.
我还没有测试过这个，但它应该为你指明正确的方向。
