使用jQuery自动扩展一个textarea
我怎样才能使一个textarea自动扩展使用jQuery？
我已经尝试了很多， 这个很棒。 链接已经死了 较新的版本可在这里 。 请参阅下面的旧版本。
您可以按住textarea中的Enter键来尝试。 比较效果与其他自动扩展textarea插件….
根据评论编辑
$(function() { $('#txtMeetingAgenda').autogrow(); }); 注意：你应该包括所需的js文件…
为了防止textarea中的滚动条在扩展/缩小过程中闪烁，可以将overflow设置为hidden ：
$('#textMeetingAgenda').css('overflow', 'hidden').autogrow()
更新：
上面的链接被打破了。 但是你仍然可以在这里获得JavaScript文件。
如果你不想要一个插件有一个非常简单的解决scheme
$("textarea").keyup(function(e) { while($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) { $(this).height($(this).height()+1); }; });
看到它工作在一个jsFiddle我曾经在这里回答另一个textarea问题 。
要回答这个问题，或者在文本被删除的时候把它缩小： jsFiddle
如果你想要一个插件
@Jason 在这里devise了一个
增长/收缩textarea。 这个演示使用jQuery进行事件绑定，但是这不是必须的。
（ 没有IE支持 – IE不响应行属性更改 ）
演示页面
HTML
<textarea class='autoExpand' rows='3' data-min-rows='3' placeholder='Auto-Expanding Textarea'></textarea>
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（已更新）
$(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; });
- 自动生长Textareas
- jQuery Autosize
感谢SpYk3HH，我从他的解决scheme开始，把它变成了这个解决scheme，它增加了收缩function，甚至更简单，更快。
$("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浏览器中进行testing。
您可能会在某些浏览器中看到滚动条的闪烁。 添加这个CSS来解决这个问题。
textarea{ overflow:hidden; }
要定义一个自动展开的textarea，你必须做两件事：
- 单击内部的Enter键展开它，或者input多于一行的内容。
- 如果用户input了空格，则缩小模糊以获得实际大小（ 奖金 ）
这是一个手工完成任务的function 。
几乎所有浏览器（<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); });
这里是一个关于这个的post。
你可以试试这个
$('#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>111111 222222 333333 444444 555555 666666</textarea> </div>
我以前使用过Textarea Expander jQuery插件，效果很好。
每个人都应该试试这个jQuery插件： xautoresize-jquery 。 这真的很好，应该解决你的问题。
我刚build立这个函数来扩展页面加载textareas。 只要改变each键入，它会发生在inputtextarea时。
// 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); });
testingChrome，IE9和Firefox。 不幸的是，Firefox有这个错误 ，它会为scrollHeight返回不正确的值，所以上面的代码包含一个（hacky）解决方法。
我修复了Reigel提供的答案中的一些错误（被接受的答案）：
- html实体被replace的顺序现在不会导致shadow元素中意外的代码。 （原来用“＆amp;”代替“>”，在一些罕见的情况下会造成错误的高度计算）。
- 如果文本以换行符结束，那么阴影现在会得到一个额外的字符“＃”，而不是像原始情况那样具有固定的增加高度。
- 初始化后调整textarea的大小会更新阴影的宽度。
- 添加单词换行：阴影的分词，所以它和textarea一样打破（强制打断很长的单词）
还有一些关于空间的问题。 我没有看到双空格的解决scheme，它们在阴影（html渲染）中显示为单个空格。 这不能通过使用＆nbsp;，因为空间应该打破。 另外，textarea在一个空格之后打破一条线，如果这个空间没有空间，它会在较早的时间点打破这条线。 欢迎提出build议。
更正后的代码：
(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));
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; }; } });
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); }); });
（因为它使用input事件，所以在Internet Explorer 9或更旧版本中不起作用）
这对我更好：
$('.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>
人们似乎有过多的工作解决scheme…
这是我如何做到的：
$('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); });
这将工作与长线，以及换行..增长和缩小..
我写了这个jquery函数似乎工作。
你需要在CSS中指定最小高度，除非你想做一些编码，它需要两位数的长度。 即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"); }
对于任何使用Reigel发布的插件的人，请注意，这将禁用Internet Explorer中的撤消function（请演示一下）。
如果这是你的问题，那么我build议使用由 @richsage 发布的插件 ，因为它不会遭受这个问题。 有关更多信息，请参阅searchUltimate Resizing Textarea的第二个重点。
还有非常酷的bgrins/ExpandingTextareas (github)项目，基于Neill Jenkins的一篇名为“ 扩展文本区域制作优雅
我想animation和自动缩小。 这个组合显然很难，因为人们想出了相当激烈的解决scheme。 我也使它成为了多文本防护的。 它并不像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'; } });
这里有很多的答案，但我发现一些非常简单的东西，附加键盘事件到textarea和检查input密钥按键代码是13
keyPressHandler(e){ if(e.keyCode == 13){ e.target.rows = e.target.rows + 1; } }
这将添加另一行给你textarea，你可以使用CSS来设置宽度。
假设您正在使用Knockout来完成这项工作，请执行以下操作：
在页面中：
<textarea data-bind="event: { keyup: $root.GrowTextArea }"></textarea>
在视图模型中：
self.GrowTextArea = function (data, event) { $('#' + event.target.id).height(0).height(event.target.scrollHeight); }
这应该工作，即使你有像我这样的Knockout foreach创build多个textareas。
简单scheme：
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); });
@Georgiy Ivankin在评论中提出了一个build议，我成功地使用了它:) – ，但稍作改动：
$('#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后停止扩展
最简单的解决scheme：
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); }); }); });
老问题，但你可以做这样的事情：
HTML：
<textarea class="text-area" rows="1"></textarea>
jQuery的：
var baseH; // base scroll height $('body') .one('focus.textarea', '.text-area', function(e) { baseH = this.scrollHeight; }) .on('input.textarea', '.text-area', function(e) { if(baseH < this.scrollHeight) { $(this).height(0).height(this.scrollHeight); } else { $(this).height(0).height(baseH); } });
这种方式自动resize将适用于类“文本区”的任何textarea。 当文本被删除时也缩小。
的jsfiddle：
