使用jQuery自动扩展一个textarea

我怎样才能使一个textarea自动扩展使用jQuery

25 Solutions collect form web for “使用jQuery自动扩展一个textarea”

我已经尝试了很多, 这个很棒。 链接已经死了 较新的版本可在这里 。 请参阅下面的旧版本。
您可以按住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,你必须做两件事:

  1. 单击内部的Enter键展开它,或者input多于一行的内容。
  2. 如果用户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提供的答案中的一些错误(被接受的答案):

  1. html实体被replace的顺序现在不会导致shadow元素中意外的代码。 (原来用“&amp;”代替“>”,在一些罕见的情况下会造成错误的高度计算)。
  2. 如果文本以换行符结束,那么阴影现在会得到一个额外的字符“#”,而不是像原始情况那样具有固定的增加高度。
  3. 初始化后调整textarea的大小会更新阴影的宽度。
  4. 添加单词换行:阴影的分词,所以它和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, '&amp;') .replace(/</g, '&lt;') .replace(/>/g, '&gt;') .replace(/\n/g, '<br/>') .replace(/\s/g,'&nbsp;'); 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, "&lt;"); val = val.replace(/>/g, "&gt;"); 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); }); 

https://fiddle.jshell.net/7wsnwbzg/

@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:

https://jsfiddle.net/rotaercz/46rhcqyn/

  • 获取元素的实际浮点宽度
  • 如何删除jQuery DataTables插件添加的search栏和页脚?
  • 如何确定和打印jQuery版本?
  • 如何在调整浏览器大小时自动alignmentjQuery UI对话框?
  • 与jQuery的jsonp
  • 使用jqueryparsinghtmlstring
  • jQuery UI对话框单独的CSS样式
  • 带有hover的引导程序下拉菜单
  • 使用jQuery来查看一个div是否有一个具有某个类的子节点
  • 推荐2012年的jQuery模板?
  • 我如何find使用jQuery元素的绝对位置?