使我的HTML文本input字段增长？
我可以在CSS中设置初始文本input大小，如下所示：
width: 50px; 但是，我希望它在我input的时候增长，直到达到例如200px。 可以这样做直CSS，HTML，最好没有JavaScript？
当然，当然也要张贴你的js / jquery解决scheme，但是如果没有他们的话，这是可行的 – 那太棒了。
我的尝试在这里：
http://jsfiddle.net/jszjz/2/
以下是仅有CSS和Content Editable的示例：
jsFiddle例子
CSS
span { border: solid 1px black; } div { max-width: 200px; }
HTML
<div> <span contenteditable="true">sdfsd</span> </div>
我只是写给你，我希望你喜欢它:)没有保证，它是跨浏览器，但我认为这是:)
(function(){ var min = 100, max = 300, pad_right = 5, input = document.getElementById('adjinput'); input.style.width = min+'px'; input.onkeypress = input.onkeydown = input.onkeyup = function(){ var input = this; setTimeout(function(){ var tmp = document.createElement('div'); tmp.style.padding = '0'; if(getComputedStyle) tmp.style.cssText = getComputedStyle(input, null).cssText; if(input.currentStyle) tmp.style.cssText = input.currentStyle.cssText; tmp.style.width = ''; tmp.style.position = 'absolute'; tmp.innerHTML = input.value.replace(/&/g, "&") .replace(/</g, "<") .replace(/>/g, ">") .replace(/"/g, """) .replace(/'/g, "'") .replace(/ /g, ' '); input.parentNode.appendChild(tmp); var width = tmp.clientWidth+pad_right+1; tmp.parentNode.removeChild(tmp); if(min <= width && width <= max) input.style.width = width+'px'; }, 1); } })();
的jsfiddle
如何编程修改input的大小属性？
在语义上（imo），这个解决scheme比被接受的解决scheme更好，因为它仍然使用input字段作为用户input，但是它引入了一点jQuery。 Soundcloud为他们的标签做了类似的事情。
<input size="1" /> $('input').on('keydown', function(evt) { var $this = $(this), size = parseInt($this.attr('size'), 10), isValidKey = (evt.which >= 65 && evt.which <= 90) || // a-zA-Z (evt.which >= 48 && evt.which <= 57) || // 0-9 evt.which === 32; if ( evt.which === 8 && size > 0 ) { // backspace $this.attr('size', size - 1); } else if ( isValidKey ) { // all other keystrokes $this.attr('size', size + 1); } });
来自： 是否有一个文本字段的jQuery自动增长插件？
在这里看到一个演示： http : //jsbin.com/ahaxe
插件：
(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);
想到几件事情：
在文本字段中使用onkeydown处理程序，测量文本*，并相应地增加文本框大小。
将一个:focus CSS类添加到宽度较大的文本框中。 那么当你专注时，你的盒子会变大。 这不完全是你要求的，但类似的。
*在javascript中测量文本并不简单。 看看这个问题的一些想法。
在这里，你可以尝试这样的事情
编辑：修订示例（添加一个新的解决scheme） http://jsfiddle.net/jszjz/10/
代码解释
var jqThis = $('#adjinput'), //object of the input field in jQuery fontSize = parseInt( jqThis.css('font-size') ) / 2, //its font-size //its min Width (the box won't become smaller than this minWidth= parseInt( jqThis.css('min-width') ), //its maxWidth (the box won't become bigger than this) maxWidth= parseInt( jqThis.css('max-width') ); jqThis.bind('keydown', function(e){ //on key down var newVal = (this.value.length * fontSize); //compute the new width if( newVal > minWidth && newVal <= maxWidth ) //check to see if it is within Min and Max this.style.width = newVal + 'px'; //update the value. });
而CSS也非常简单
#adjinput{ max-width:200px !important; width:40px; min-width:40px; font-size:11px; }
编辑：另一个解决scheme是让用户键入他想要的和模糊（焦点出），抓住string（在相同的字体大小）将其放在一个div – 数div的宽度 – 然后用一个很好的animation与一个很酷缓动效应更新input字段的宽度。 唯一的缺点是input字段在用户input时将保持“小”。 或者你可以添加一个超时：）你也可以在上面的提琴上检查这样一种解决scheme！
如果将span设置为显示：inline-block，则自动水平和垂直resize的效果非常好：
<span contenteditable="true" style="display: inline-block; border: solid 1px black; min-width: 50px; max-width: 200px"></span>
我知道这是一个严重的旧post – 但我的答案可能对其他人有用，所以在这里。 我发现如果contenteditable div的CSS样式定义的最小高度是200而不是200的高度，那么div会自动缩放。
