jQuery – 自动大小文本input（不是textarea！）
如何使用jQuery自动调整input type =“text”字段的大小？ 我希望它在开始时像100px宽，然后使其自动加宽作为用户input文字…是可能的？
这里有一个插件可以完成你以后的工作：
插件：
(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);
编辑：发现： 是否有一个jQuery自动增长插件的文本字段？
我不认为有一个完美的解决scheme，因为你无法检测input到input元素的文本的实际宽度。 这一切都取决于您使用的字体，浏览器中的缩放设置等。
但是，如果你可以select一种字体，你可以真正计算出文字的像素数量（这是最难的部分，但我想你可以试着估算一下）。 您可以使用它来改变input栏的宽度。
$('input').keyup(function () { // I'm assuming that 1 letter will expand the input by 10 pixels var oneLetterWidth = 10; // I'm also assuming that input will resize when at least five characters // are typed var minCharacters = 5; var len = $(this).val().length; if (len > minCharacters) { // increase width $(this).width(len * oneLetterWidth); } else { // restore minimal width; $(this).width(50); } });
（ 编辑：使用.text()方法，而不是.html()获得所有格式正确。）
你好，我不知道你是否还在寻找，但当我正在寻找一个脚本来做同样的事情时，我遇到了这个问题。 所以希望这有助于任何正在尝试这样做的人或类似的人。
function editing_key_press(e){ if(!e.which)editing_restore(this.parentNode); var text = $('<span>') .text($(this).val()) .appendTo(this.parentNode); var w = text.innerWidth(); text.remove(); $(this).width(w+10); }
这段代码的逻辑就是把内容放到页面上，然后获取这个内容的宽度并将其删除。 我遇到的问题是，我必须让它在keydown和keyup上运行才能成功运行。
希望这有助于，可能不是因为我只做了很短的时间jQuery。
谢谢
乔治
我有一个GitHub上的jQuery插件： https ： //github.com/MartinF/jQuery.Autosize.Input
它使用与抓住答案相同的方法，但是在评论中提到了一些变化。
你可以在这里看到一个生动的例子： 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();
我用了seize的答案 ，但做了这些改变：
-
在设置
isValidWidthChange和// Animate width：if (!isValidWidthChange && newWidth > minWidth && newWidth > o.maxWidth) { newWidth = o.maxWidth; isValidWidthChange = true; }这样，当input的内容太大而不能容纳最大宽度时，input的容量就会增大。
-
在
$(this).bind('keyup keydown blur update', check);：// Auto-size when page first loads check();
看到这个jQuery插件： https://github.com/padolsey/jQuery.fn.autoResize
我只是用textareas来testing它，它的工作原理！ 支持textareas的自动生成，input[type = text]和input[type = password]。
UPD。 看起来像原来的作者从github删除回购。 该插件已经很久没有更新，而且事实certificate是相当的错误。 我只能build议你find一个更好的解决scheme。 我前段时间向这个插件提出了一个pull请求，所以我有一个在github帐户中的副本， 只有在你想改进它时才使用它，这不是防弹的 ！
另外，我发现ExtJS框架已经自动实现了文本字段的实现，请参阅grow config属性。 虽然从框架中挖掘出这个小小的逻辑并不是那么容易，但它可以给你一些关于这个方法的好点子。
默认情况下，input宽度由大小参数控制，对于type="text" ，它对应于应该是宽度的字符数。
由于这是以字符而不是像素来衡量的，所以实际的像素大小由正在使用的（固定宽度）字体来控制。
我只是在想同样的事情。 当用户正在向其中写入文本时，文本框应该自动调整它的大小。 我从来没有使用它，但我有一个想法如何做到这一点。 像这样的东西：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title></title> </head> <body> <table border="1"> <tr> <td> <span id="mySpan"> <span id="mySpan2"></span> <input id="myText" type="text" style="width:100%" onkeyup="var span = document.getElementById('mySpan2');var txt = document.getElementById('myText'); span.innerHTML=txt.value;"> </span> </td> <td> sss </td> </tr> </table> </body> </html>
试试这个代码：
var newTextLength = Math.floor($("input#text).val() * .80); $("input#text").attr("size",newTextLength);
