是否有一个文本字段的jQuery自动增长插件?

我有一个自动增长的textarea ,但没有input文本字段的各种插件。 有人知道是否存在?

这里有一个插件可以完成你以后的工作:

编辑 :我已经修复了插件按Mathias的评论。 🙂

在这里看到一个演示: http : //jsfiddle.net/rRHzY

插件:

 (function($){ $.fn.autoGrowInput = function(o) { o = $.extend({ maxWidth: 1000, minWidth: 0, comfortZone: 70 }, o); this.filter('input:text').each(function(){ var minWidth = o.minWidth || $(this).width(), val = '', input = $(this), testSubject = $('<tester/>').css({ position: 'absolute', top: -9999, left: -9999, width: 'auto', fontSize: input.css('fontSize'), fontFamily: input.css('fontFamily'), fontWeight: input.css('fontWeight'), letterSpacing: input.css('letterSpacing'), whiteSpace: 'nowrap' }), check = function() { if (val === (val = input.val())) {return;} // Enter new content into testSubject var escaped = val.replace(/&/g, '&amp;').replace(/\s/g,'&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); testSubject.html(escaped); // Calculate new width + whether to change var testerWidth = testSubject.width(), newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth, currentWidth = input.width(), isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth) || (newWidth > minWidth && newWidth < o.maxWidth); // Animate width if (isValidWidthChange) { input.width(newWidth); } }; testSubject.insertAfter(input); $(this).bind('keyup keydown blur update', check); }); return this; }; })(jQuery); 

我有一个GitHub上的jQuery插件: https : //github.com/MartinF/jQuery.Autosize.Input

它使用与James的答案相同的方法,但是在评论中提到了一些变化。

你可以在这里看到一个生动的例子: http : //jsfiddle.net/mJMpw/6/

例:

 <input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 40 }' /> input[type="data-autosize-input"] { width: 90px; min-width: 90px; max-width: 300px; transition: width 0.25s; } 

你只要使用CSS设置最小/最大宽度,并使用宽度过渡,如果你想要一个很好的效果。

您可以将input元素的data-autosize-input属性的空格/距离指定为json符号中的值。

当然,你也可以使用jQuery来初始化它

 $("selector").autosizeInput(); 

好的插件,谢谢! 我改变了两个似乎在我的项目中更好的东西。

  1. 我将TESTER标记更改为DIV,以避免“意外地调用方法或属性访问”。 在IE8中(即使你的演示在IE8中工作,是否有使用自定义HTML标记的特殊原因?
  2. 在代码结束附近的绑定语句之后,我添加了对check()的调用,以便在加载页面后立即调整文本框的大小,以防文本框在启动时已经包含内容。

希望这可以帮助。

只是想分享一下詹姆斯伟大插件的小改进。 将此代码添加到tester元素的CSS声明中以考虑文本缩进:

 textIndent: 0 

没有它,在某些情况下,testing器元素可能会无意中inheritance其他地方的文本缩进,从而丢弃input的大小。

像JP一样,我也希望通过将“trigger('keyup')”链接到autoGrowInput方法调用,从一开始就将input大小调整为正确的大小,

 $('#contact_form').autoGrowInput({comfortZone: 7, minWidth: 10, maxWidth: 200}).trigger('keyup'); 

作为一个便笺,我注册到这个网站纯粹是为了评论詹姆斯的解决scheme,我有点恼火,发现我不能,因为我没有足够的声望点开始。 对不起,如果我错过了什么,但这似乎意味着我必须发表这是对主要问题的评论,而不是更恰当的詹姆斯的解决scheme。

我也换了

 $(this).bind('keyup keydown blur update', check) 

 $(this).bind('keyup blur update', check).bind('keydown', function() { setTimeout(check); }); 

以便在浏览器重新渲染后调整字段的大小。 它会摆脱一些喋喋不休的领域。

我已经创build了一个input文本的插件,重新创build这种行为。 它还有其他一些独特的function。 你可以看到一个例子,并查看插件的文档 。 @james回答在将大文本粘贴到input中时遇到了一些问题。 为了解决这个问题,我对他的代码做了一些修改。 这个例子是一个演示 。

 (function($){ $.fn.autoGrowInput = function(o) { o = $.extend({ maxWidth: 200, minWidth: 1, comfortZone: 1, width: 1 }, o); this.filter('input:text').each(function(){ var minWidth = o.minWidth || $(this).width(), maxWidth = o.maxWidth, val = '', input = $(this), testSubject = $('<tester/>').css({ position: 'absolute', top: -9999, left: -9999, width: 'auto', fontSize: input.css('fontSize'), fontFamily: input.css('fontFamily'), fontWeight: input.css('fontWeight'), letterSpacing: input.css('letterSpacing'), whiteSpace: 'nowrap' }), check = function() { if (val === (val = input.val())) {return;} // Enter new content into testSubject var escaped = val.replace(/&/g, '&amp;').replace(/\s/g,'&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); testSubject.html(escaped); // Calculate new width + whether to change var testerWidth = testSubject.width(), newWidth = testerWidth + o.comfortZone, currentWidth = input.width(); if (testerWidth < minWidth) { newWidth = minWidth; } else if (testerWidth > maxWidth) { newWidth = maxWidth; } input.width(newWidth + o.comfortZone); }; testSubject.insertAfter(input); $(this).bind('input', check); }); return this; }; })(jQuery); 

如果您希望文本框在其内部的string超出其宽度时增长,也许这样的东西会为您工作…它检测文本框的大小属性。 如果string的长度超过该属性,则将文本框扩展到keyup上string的长度。

在下面的脚本中,“#test”是一个文本框ID。

 <script language="javascript" type="text/javascript"> $(document).ready(function(){ $("#test").keyup(function(){ if($("#test").attr("size") < $("#test").val().length){ size = $("#test").val().length; $("#test").attr("size",size); } }) }); </script> 

在IE浏览器溢出中足够有趣:可见非常重视。 您可以通过在您的input元素上应用overflow:visible来实现此效果。 不知道现代浏览器是否存在类似的CSS技巧。

令人毛骨悚然的插件詹姆斯! 谢谢。 JP最后加上了支票build议,虽然非常有效。

另外我也加了一些改动。 我想将input大小设置为最大大小,如果改变的宽度超过了最大宽度,所以我补充说:

 else if (widthexceeds){ input.width(o.maxWidth); } 

在isValidWidthChange的if检查下面,其中widthexceeds = newWidth > o.maxWidth

而不是文本框自动增长。 你可以使用contenteditable="true"可编辑div。 请检查下面的代码

 <div contenteditable="true" id="divContent">Click and Edit</div> 

完整的演示请检查下面的链接

DEMO