如何使用jQuery自动扩展textarea？
我有一个用于解释会议议程的文本框，所以当我的议程文本不断增加该文本框区域时，我想扩展该文本框。
答案 0 :(得分：166)
如果您不想要插件，则有一个非常简单的解决方案
$("textarea").keyup(function(e) {
while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
$(this).height($(this).height()+1);
};
});
在jsFiddle I used to answer another textarea question here中查看它。
要回答反向执行此问题或在文本删除时将其缩小的问题：jsFiddle
如果你想要一个插件
答案 1 :(得分：112)
我尝试过很多次
this one is great. 链接已死。较新的版本是available here。请参阅下面的旧版本。
您可以尝试在textarea中按住enter键。将效果与其他自动扩展textarea插件进行比较....
根据评论
编辑$(function() {
$('#txtMeetingAgenda').autogrow();
});
注意：您应该包含所需的js文件......
防止textarea中的滚动条闪烁和＆amp;在扩展/收缩期间关闭，您也可以将overflow设置为hidden：
$('#textMeetingAgenda').css('overflow', 'hidden').autogrow()
<强>更新
上面的链接已损坏。但您仍然可以获取javascript文件here。
答案 2 :(得分：33)
增长/缩小textarea。这个演示使用jQuery进行事件绑定，但它不是必须的。
（没有IE支持 - IE不响应行属性更改）
<textarea class='autoExpand' rows='3' data-min-rows='3' placeholder='Auto-Expanding Textarea'></textarea>
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;
}
$(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;
});
答案 3 :(得分：21)
答案 4 :(得分：16)
你可以尝试这个
$('#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>
答案 5 :(得分：11)
感谢SpYk3HH，我开始使用他的解决方案并将其转换为此解决方案，这增加了缩小的功能，我认为它更简单，更快捷。
$("textarea").keyup(function(e) {
$(this).height(30);
$(this).height(this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth")));
});
在当前的Chrome，Firefox和Android 2.3.3浏览器中进行了测试。
您可能会在某些浏览器中看到滚动条的闪烁。添加此CSS来解决这个问题。
textarea{ overflow:hidden; }
答案 6 :(得分：10)
要定义自动展开式textarea，您必须做两件事：
这是一个手工制作功能来完成任务。
几乎所有浏览器（＆lt; 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);
});
HERE是关于此的帖子。
答案 7 :(得分：6)
之前我使用过Textarea Expander jQuery插件，结果很好。
答案 8 :(得分：4)
每个人都应该尝试这个jQuery插件：xautoresize-jquery。这真的很好，应该解决你的问题。
答案 9 :(得分：3)
我刚刚构建了这个函数来扩展pageload上的textareas。只需将each更改为keyup，就会在输入textarea时出现。
// On page-load, auto-expand textareas to be tall enough to contain initial content
$('textarea').each(function(){
var pad = parseInt($(this).css('padding-top'));
if ($.browser.mozilla)
$(this).height(1);
var contentHeight = this.scrollHeight;
if (!$.browser.mozilla)
contentHeight -= pad * 2;
if (contentHeight > $(this).height())
$(this).height(contentHeight);
});
在Chrome，IE9和Firefox中测试过。不幸的是Firefox有this bug，它返回scrollHeight的错误值，因此上面的代码包含一个（hacky）解决方法。
答案 10 :(得分：3)
SpYk3HH代码，增加缩小尺寸。
function get_height(elt) {
return elt.scrollHeight + parseFloat($(elt).css("borderTopWidth")) + parseFloat($(elt).css("borderBottomWidth"));
}
$("textarea").keyup(function(e) {
var found = 0;
while (!found) {
$(this).height($(this).height() - 10);
while($(this).outerHeight() < get_height(this)) {
$(this).height($(this).height() + 1);
found = 1;
};
}
});
答案 11 :(得分：3)
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);
});
});
（这在Internet Explorer 9或更早版本中不起作用，因为它使用input事件）
答案 12 :(得分：3)
我修复了Reigel提供的答案中的一些错误（接受的答案）：
还有一些与空间有关的问题。我没有看到双空格的解决方案，它们在阴影中显示为单个空格（html渲染）。这不能通过使用＆amp; nbsp;来表达，因为空格应该破坏。此外，textarea在空格之后断开一条线，如果没有空间用于该空间，它将在较早的点处断开线。欢迎提出建议。
更正后的代码：
(function ($) {
$.fn.autogrow = function (options) {
var $this, minHeight, lineHeight, shadow, update;
this.filter('textarea').each(function () {
$this = $(this);
minHeight = $this.height();
lineHeight = $this.css('lineHeight');
$this.css('overflow','hidden');
shadow = $('<div></div>').css({
position: 'absolute',
'word-wrap': 'break-word',
top: -10000,
left: -10000,
width: $this.width(),
fontSize: $this.css('fontSize'),
fontFamily: $this.css('fontFamily'),
lineHeight: $this.css('lineHeight'),
resize: 'none'
}).appendTo(document.body);
update = function () {
shadow.css('width', $(this).width());
var val = this.value.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/\n/g, '<br/>')
.replace(/\s/g,' ');
if (val.indexOf('<br/>', val.length - 5) !== -1) { val += '#'; }
shadow.html(val);
$(this).css('height', Math.max(shadow.height(), minHeight));
};
$this.change(update).keyup(update).keydown(update);
update.apply(this);
});
return this;
};
}(jQuery));
答案 13 :(得分：2)
这更适合我：
$('.resiText').on('keyup input', function() {
$(this).css('height', 'auto').css('height', this.scrollHeight + (this.offsetHeight - this.clientHeight));
});.resiText {
box-sizing: border-box;
resize: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="resiText"></textarea>
答案 14 :(得分：2)
人们似乎有非常过度的解决方案......
我就是这样做的：
$('textarea').keyup(function()
{
var
$this = $(this),
height = parseInt($this.css('line-height'), 10),
padTop = parseInt($this.css('padding-top'), 10),
padBot = parseInt($this.css('padding-bottom'), 10);
$this.height(0);
var
scroll = $this.prop('scrollHeight'),
lines = (scroll - padTop - padBot) / height;
$this.height(height * lines);
});
这将适用于长行，以及换行符......增长和缩小..
答案 15 :(得分：1)
让我们假设您正在尝试使用Knockout来实现这一目标......请按照以下方式进行：＆/ p>
在页面中：
@Entity
public class Image extends com.mywebsite.entity.Entity{
//System
@Id
@GeneratedValue
private int id;
[...]
}
@Entity
public class User extends com.mywebsite.entity.Entity{
//System
@Id
@GeneratedValue
private int id;
[...]
//Data
private Image profilePhoto;
[...]
}
在视图模型中：
<textarea data-bind="event: { keyup: $root.GrowTextArea }"></textarea>
即使你有像我这样的Knockout foreach创建的多个textareas，这应该可以工作。
答案 16 :(得分：1)
这对我来说效果很好
$(".textarea").on("keyup input", function(){
$(this).css('height', 'auto').css('height', this.scrollHeight+
(this.offsetHeight - this.clientHeight));
});
答案 17 :(得分：1)
function autoResizeTextarea() {
for (let index = 0; index < $('textarea').length; index++) {
let element = $('textarea')[index];
let offset = element.offsetHeight - element.clientHeight;
$(element).css('resize', 'none');
$(element).on('input', function() {
$(this).height(0).height(this.scrollHeight - offset - parseInt($(this).css('padding-top')));
});
}
}
https://codepen.io/nanachi1/pen/rNNKrzQ
这应该有效。
答案 18 :(得分：1)
答案 19 :(得分：1)
最简单的解决方案：
HTML：
<textarea class="auto-expand"></textarea>
的CSS：
.auto-expand {
overflow:hidden;
min-height: 80px;
}
js（jquery）：
$(document).ready(function () {
$("textarea.auto-expand").focus(function () {
var $minHeight = $(this).css('min-height');
$(this).on('input', function (e) {
$(this).css('height', $minHeight);
var $newHeight = $(this)[0].scrollHeight;
$(this).css('height', $newHeight);
});
});
});
答案 20 :(得分：1)
简单解决方案：
HTML：
<textarea class='expand'></textarea>
JS：
$('textarea.expand').on('input', function() {
$(this).scrollTop($(this).height());
});
$('textarea.expand').scroll(function() {
var h = $(this).scrollTop();
if (h > 0)
$(this).height($(this).height() + h);
});
答案 21 :(得分：1)
对于使用Reigel发布的插件的任何人，请注意这将禁用Internet Explorer中的撤消功能（去试一试）。
如果这对您来说是一个问题，那么我建议您使用plugin posted by @richsage，因为它不会遇到此问题。有关详细信息，请参阅Searching for the Ultimate Resizing Textarea上的第二个要点。
答案 22 :(得分：1)
有很多答案，但我发现一些非常简单的事情，将一个键盘事件附加到textarea并检查输入键按键代码是13
keyPressHandler(e){
if(e.keyCode == 13){
e.target.rows = e.target.rows + 1;
}
}
这将为您添加另一行textarea，您可以使用CSS设置宽度样式。
答案 23 :(得分：1)
我想要动画并自动缩小。这种组合显然很难，因为人们为它提出了非常强烈的解决方案。我也做了多个textarea证明。它并不像jQuery插件那么荒谬。
我基于vsync的答案（以及他为此做出的改进），http://codepen.io/anon/pen/vlIwj是我改进的代码。
HTML
<textarea class='autoExpand' rows='3' data-min-rows='3' placeholder='Auto-Expanding Textarea'></textarea>
CSS
body{ background:#728EB2; }
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;
transition:all 1s;
-webkit-transition:all 1s;
}
JS
var rowheight = 0;
$(document).on('input.textarea', '.autoExpand', function(){
var minRows = this.getAttribute('data-min-rows')|0,
rows = this.value.split("\n").length;
$this = $(this);
var rowz = rows < minRows ? minRows : rows;
var rowheight = $this.attr('data-rowheight');
if(!rowheight){
this.rows = rowz;
$this.attr('data-rowheight', (this.clientHeight - parseInt($this.css('padding-top')) - parseInt($this.css('padding-bottom')))/ rowz);
}else{
rowz++;
this.style.cssText = 'height:' + rowz * rowheight + 'px';
}
});
答案 24 :(得分：1)
还有一个非常酷的bgrins/ExpandingTextareas (github)项目，基于Neill Jenkins Expanding Text Areas Made Elegant的出版物{{3}}
答案 25 :(得分：1)
我写了这个似乎有效的jquery函数。
你需要在css中指定min-height，除非你想做一些编码，否则需要两位数长。即12px;
$.fn.expand_ta = function() {
var val = $(this).val();
val = val.replace(/</g, "<");
val = val.replace(/>/g, ">");
val += "___";
var ta_class = $(this).attr("class");
var ta_width = $(this).width();
var min_height = $(this).css("min-height").substr(0, 2);
min_height = parseInt(min_height);
$("#pixel_height").remove();
$("body").append('<pre class="'+ta_class+'" id="pixel_height" style="position: absolute; white-space: pre-wrap; visibility: hidden; word-wrap: break-word; width: '+ta_width+'px; height: auto;"></pre>');
$("#pixel_height").html(val);
var height = $("#pixel_height").height();
if (val.substr(-6) == "<br />"){
height = height + min_height;
};
if (height >= min_height) $(this).css("height", height+"px");
else $(this).css("height", min_height+"px");
}
答案 26 :(得分：0)
@Georgiy Ivankin在评论中提出建议， 我成功地使用它:) - ，但稍有改动：
$('#note').on('keyup',function(e){
var maxHeight = 200;
var f = document.getElementById('note');
if (f.clientHeight < f.scrollHeight && f.scrollHeight < maxHeight )
{ f.style.height = f.scrollHeight + 'px'; }
});
在达到最大高度200px
后停止扩展答案 27 :(得分：0)
老问题，但你可以这样做：
HTML：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input id="test" type="checkbox">
</label>jquery的：
<textarea class="text-area" rows="1"></textarea>
这样，自动调整大小将应用于任何带有＆＃34; text-area＆＃34;的textarea。删除文本时也会收缩。
的jsfiddle：
答案 28 :(得分：0)
这是我最终使用的解决方案。我想要一个内联解决方案，到目前为止看起来效果很好：
<textarea onkeyup="$(this).css('height', 'auto').css('height', this.scrollHeight + this.offsetHeight - this.clientHeight);"></textarea>
答案 29 :(得分：0)
尝试一下：
$('textarea[name="mytextarea"]').on('input', function(){
$(this).height('auto').height($(this).prop('scrollHeight') + 'px');
}).trigger('input');
答案 30 :(得分：0)
简单的jQuery解决方案：
$("textarea").keyup(function() {
var scrollHeight = $(this).prop('scrollHeight') - parseInt($(this).css("paddingTop")) - parseInt($(this).css("paddingBottom"));
if (scrollHeight > $(this).height()) {
$(this).height(scrollHeight + "px");
}
});
HTML：
<textarea rows="2" style="padding: 20px; overflow: hidden; resize: none;"></textarea>
溢出 应该被 隐藏 。如果不想使用鼠标调整大小，则 调整大小 为 没有 。
答案 31 :(得分：0)
您可以在所有可能改变文本大小的事件上将文本区域的高度设置为scrollHeight：
function setTextareaResponsive(id) {
adjustTextAreaHeight(id);
$(window).on("resize", function() {
adjustTextareaHeight(id);
});
$("#" + id).on("change input", function() {
adjustTextareaHeight(id);
});
}
function adjustTextareaHeight(id) {
// set height to 1, so scrollHeight is related to linecount, not original textarea size
$("#" + id).height(1);
$("#" + id).height(document.getElementById(id).scrollHeight);
}
我个人更喜欢它，当没有用scrollHeight提供的额外高度（通常为12px）填充高度时。 这就是为什么我想将高度设置为行数乘以lineHeight的原因，在这种情况下，函数AdjustTextareaHeight看起来像这样：
function adjustTextareaHeight(id) {
var textarea = document.getElementById(id);
// set height to 1, so scrollHeight is related to linecount, not original textarea size
$("#" + id).height(1);
var lineHeight = parseInt(getComputedStyle(textarea).lineHeight)
var numberOfLines = Math.floor(textarea.scrollHeight / lineHeight)
$("#" + id).height(lineHeight * numberOfLines);
}