使用jQuery自动扩展textarea

Question

使用jQuery自动扩展textarea

如何使用jQuery自动扩展textarea？

我有一个用于解释会议议程的文本框，所以当我的议程文本不断增加该文本框区域时，我想扩展该文本框。

Answer 1

您可以尝试在textarea中按住enter键。比较效果与其他自动扩展textarea插件....根据评论进行编辑$(function() {    $('#txtMeetingAgenda').autogrow();});注意：你应该包含所需的js文件......为了防止在textarea的滚动条从闪烁和关闭过程中膨胀/收缩，可以设置overflow到hidden还有：$('#textMeetingAgenda').css('overflow', 'hidden').autogrow()更新：上面的链接已被破坏。但你仍然可以在这里获取javascript文件。

Answer 2

如果你不想要一个插件，那就有一个非常简单的解决方案$("textarea").keyup(function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;while($(this).outerHeight()&nbsp;<&nbsp;this.scrollHeight&nbsp;+&nbsp;parseFloat($(this).css("borderTopWidth"))&nbsp;+&nbsp;parseFloat($(this).css("borderBottomWidth")))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).height($(this).height()+1); &nbsp;&nbsp;&nbsp;&nbsp;};});看到它在一个jsFiddle工作我曾经在这里回答另一个textarea问题。要回答这样做的问题，或者在文本删除时将其缩小：jsFiddle如果你想要一个插件

Answer 3

生长/收缩textarea。这个演示使用jQuery进行事件绑定，但它不是必须的。（没有IE支持 - IE不响应行属性更改）演示页面HTML<textarea&nbsp;class='autoExpand'&nbsp;rows='3'&nbsp;data-min-rows='3'&nbsp;placeholder='Auto-Expanding&nbsp;Textarea'></textarea>CSStextarea{&nbsp;&nbsp; &nbsp;&nbsp;display:block; &nbsp;&nbsp;box-sizing:&nbsp;padding-box; &nbsp;&nbsp;overflow:hidden; &nbsp;&nbsp;padding:10px; &nbsp;&nbsp;width:250px; &nbsp;&nbsp;font-size:14px; &nbsp;&nbsp;margin:50px&nbsp;auto; &nbsp;&nbsp;border-radius:8px; &nbsp;&nbsp;border:6px&nbsp;solid&nbsp;#556677;}javascript（更新）$(document) &nbsp;&nbsp;&nbsp;&nbsp;.one('focus.textarea',&nbsp;'.autoExpand',&nbsp;function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;savedValue&nbsp;=&nbsp;this.value; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.value&nbsp;=&nbsp;''; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.baseScrollHeight&nbsp;=&nbsp;this.scrollHeight; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.value&nbsp;=&nbsp;savedValue; &nbsp;&nbsp;&nbsp;&nbsp;}) &nbsp;&nbsp;&nbsp;&nbsp;.on('input.textarea',&nbsp;'.autoExpand',&nbsp;function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;minRows&nbsp;=&nbsp;this.getAttribute('data-min-rows')|0, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rows; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.rows&nbsp;=&nbsp;minRows; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rows&nbsp;=&nbsp;Math.ceil((this.scrollHeight&nbsp;-&nbsp;this.baseScrollHeight)&nbsp;/&nbsp;16); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.rows&nbsp;=&nbsp;minRows&nbsp;+&nbsp;rows; &nbsp;&nbsp;&nbsp;&nbsp;});