是否有一个文本字段的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, '&').replace(/\s/g,' ').replace(/</g, '<').replace(/>/g, '>'); 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();
好的插件，谢谢！ 我改变了两个似乎在我的项目中更好的东西。
- 我将TESTER标记更改为DIV，以避免“意外地调用方法或属性访问”。 在IE8中（即使你的演示在IE8中工作，是否有使用自定义HTML标记的特殊原因？
- 在代码结束附近的绑定语句之后，我添加了对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, '&').replace(/\s/g,' ').replace(/</g, '<').replace(/>/g, '>'); 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
