使用 jQuery 自动扩展文本区域
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2948230/
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
Auto expand a textarea using jQuery
提问by Piyush
How can I make a textarea automatically expand using jQuery?
如何使用 jQuery 使 textarea 自动扩展？
I have a textbox for explaining the agenda of the meeting, so I want to expand that textbox when my agenda's text keep growing that textbox area.
我有一个用于解释会议议程的文本框，因此当我的议程文本不断扩大该文本框区域时，我想扩展该文本框。
采纳答案by Reigel
I have tried lots and
this one is great.Link is dead. Newer version is available here. See below for old version.
You can try by pressing and hold enter key in textarea. Compare the effect with the other auto expanding textarea plugin....
我已经尝试了很多，
这个很棒。链接已死。较新的版本可在此处获得。请参阅下面的旧版本。
您可以通过在 textarea 中按住 enter 键来尝试。与其他自动扩展textarea插件的效果进行比较....
editbased on comment
根据评论编辑
$(function() {
$('#txtMeetingAgenda').autogrow();
});
note: you should include the needed js files...
注意：您应该包含所需的 js 文件...
To prevent the scrollbar in the textarea from flashing on & off during expansion/contraction, you can set the overflowto hiddenas well:
为了防止在textarea的滚动条从扩张/收缩的过程中通断闪烁，您可以设置overflow到hidden还有：
$('#textMeetingAgenda').css('overflow', 'hidden').autogrow()
Update:
更新：
The link above is broken. But you can still get the javascript files here.
上面的链接坏了。但是您仍然可以在此处获取 javascript 文件。
回答by SpYk3HH
If you dont want a plugin there is a very simple solution
如果您不想要插件，有一个非常简单的解决方案
$("textarea").keyup(function(e) {
while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
$(this).height($(this).height()+1);
};
});
See it working in a jsFiddle I used to answer another textarea question here.
看到它在jsFiddle 中工作我曾经在这里回答另一个 textarea 问题。
To answer the question of doing it in reverse or making it smaller as text is removed: jsFiddle
要回答反向执行或在删除文本时使其变小的问题：jsFiddle
And if you do want a plugin
如果你确实想要一个插件
回答by vsync
Grows / Shrinks textarea. This demo utilizes jQuery for event binding, but it's not a must in any way.
(no IE support - IE doesn't respond to rowsattribute change)
增大/缩小文本区域。该演示使用 jQuery 进行事件绑定，但无论如何都不是必须的。
（不支持 IE - IE 不响应行属性更改）
DEMO PAGE
演示页
HTML
HTML
<textarea class='autoExpand' rows='3' data-min-rows='3' placeholder='Auto-Expanding Textarea'></textarea>
CSS
CSS
textarea{
display:block;
box-sizing: padding-box;
overflow:hidden;
padding:10px;
width:250px;
font-size:14px;
margin:50px auto;
border-radius:8px;
border:6px solid #556677;
}
javascript (updated)
javascript（更新）
$(document)
.one('focus.textarea', '.autoExpand', function(){
var savedValue = this.value;
this.value = '';
this.baseScrollHeight = this.scrollHeight;
this.value = savedValue;
})
.on('input.textarea', '.autoExpand', function(){
var minRows = this.getAttribute('data-min-rows')|0,
rows;
this.rows = minRows;
rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
this.rows = minRows + rows;
});
回答by reza.cse08
You can try this one
你可以试试这个
$('#content').on('change keyup keydown paste cut', 'textarea', function () {
$(this).height(0).height(this.scrollHeight);
}).find('textarea').change();<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content">
<textarea>How about it</textarea><br />
<textarea rows="5">111111
222222
333333
444444
555555
666666</textarea>
</div>回答by drolex
Thanks to SpYk3HH, I started with his solution and turned it into this solution, which adds the shrinking functionality and is even simpler and faster, I presume.
感谢 SpYk3HH，我从他的解决方案开始，并将其变成了这个解决方案，它增加了收缩功能，而且更简单、更快，我想。
$("textarea").keyup(function(e) {
$(this).height(30);
$(this).height(this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth")));
});
Tested in current Chrome, Firefox and Android 2.3.3 browser.
在当前的 Chrome、Firefox 和 Android 2.3.3 浏览器中测试。
You may see flashes of the scroll bars in some browsers. Add this CSS to solve that.
您可能会在某些浏览器中看到滚动条闪烁。添加这个 CSS 来解决这个问题。
textarea{ overflow:hidden; }
回答by open and free
To define a auto expandable textarea, you have to do two things:
要定义一个可自动扩展的 textarea，你必须做两件事：
- Expandit once you click Enter key inside it, or type content more than one line.
- And shrinkit at blur to get the actual size if user has entered white spaces.(bonus)
- 单击其中的 Enter 键后展开它，或者键入多于一行的内容。
- 而收缩在模糊它来获得实际大小，如果用户输入空格。（奖金）
Here is a handmade functionto accomplish the task.
这是一个手工制作的功能来完成任务。
Working fine with almost all browser ( < IE7 ). Here is the method:
几乎适用于所有浏览器 (< IE7)。这是方法：
//Here is an event to get TextArea expand when you press Enter Key in it.
// intiate a keypress event
$('textarea').keypress(function (e) {
if(e.which == 13) {
var control = e.target;
var controlHeight = $(control).height();
//add some height to existing height of control, I chose 17 as my line-height was 17 for the control
$(control).height(controlHeight+17);
}
});
$('textarea').blur(function (e) {
var textLines = $(this).val().trim().split(/\r*\n/).length;
$(this).val($(this).val().trim()).height(textLines*17);
});
HEREis a post about this.
这里有一篇关于这个的帖子。
回答by richsage
I've used the Textarea ExpanderjQuery plugin before with good results.
我之前使用过Textarea ExpanderjQuery 插件，效果很好。
回答by danchoif2
Everyone should try this jQuery plugin: xautoresize-jquery. It's really good and should solve your problem.
每个人都应该尝试这个 jQuery 插件：xautoresize-jquery。这真的很好，应该可以解决您的问题。
回答by benrwb
function autosize(textarea) {
$(textarea).height(1); // temporarily shrink textarea so that scrollHeight returns content height when content does not fill textarea
$(textarea).height($(textarea).prop("scrollHeight"));
}
$(document).ready(function () {
$(document).on("input", "textarea", function() {
autosize(this);
});
$("textarea").each(function () {
autosize(this);
});
});
(This will not work in Internet Explorer 9 or older as it makes use of the inputevent)
（这在 Internet Explorer 9 或更早版本中不起作用，因为它使用了该input事件）
