blocks|key|4043893|text|脑海中浮现出几件事：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4043894|在文本字段中使用onkeydown处理程序，测量文本*，并相应地增加文本框大小。|offset|length|style|CODE|4043895|将:focus+css类附加到宽度较大的文本框。当你聚焦的时候，你的盒子会更大。这并不完全是你想要的，但却很相似。|4043896|*在javascript中测量文本并不简单。请查看this+question获取一些想法。|4043897|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript^0|0|8|9|0|1|6|0|P|D|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@$D|V|E|W|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|10|8|@]|9|@$D|11|E|12|1|13]]|A|$]]|$1|L|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]]]

<p>A couple of things come to mind: </p>

<p>Use an <code>onkeydown</code> handler in your text field, measure the text*, and increase the text box size accordingly.</p>

<p>Attach a <code>:focus</code> css class to your text box with a larger width. Then your box will be larger when focused. That's not exactly what you're asking for, but similar.</p>

<p>* It's not straightforward to measure text in javascript. Check out <a href="https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript">this question</a> for some ideas. </p>


blocks|key|3759085|text|在这里，您可以尝试这样的操作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3759086|编辑:修订的示例(添加了一个新的解决方案)+http://jsfiddle.net/jszjz/10/|offset|length|3759087|代码说明|3759088|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+%2B+'px';+//update+the+value.
});|code-block|syntax|javascript|3759089|而且css也非常简单|3759090|#adjinput{
++++max-width:200px+!important;
++++width:40px;
++++min-width:40px;
++++font-size:11px;
}|3759091|编辑:另一个解决方案是让用户输入他想要的内容，在模糊(焦点输出)上，抓取字符串(具有相同的字体大小)，将其放在div中-计算div的宽度-然后使用一个具有很酷的缓解效果的漂亮动画更新输入字段宽度。唯一的缺点是，当用户键入时，输入字段将保持“较小”。或者你可以添加一个超时：)你也可以在上面的小提琴上检查这样的解决方案！|3759092|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/jszjz/10/^0|0|M|T|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|F|3|G|5|6|7|15|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>Here you can try something like this</p>

<p>EDIT: REVISED EXAMPLE (added one new solution)
<a href="http://jsfiddle.net/jszjz/10/" rel="nofollow">http://jsfiddle.net/jszjz/10/</a></p>

<p>Code explanation</p>

<pre><code>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  &gt; minWidth &amp;&amp; newVal &lt;= maxWidth ) //check to see if it is within Min and Max
       this.style.width = newVal + 'px'; //update the value.
});
</code></pre>

<p>and the css is pretty straightforward too</p>

<pre><code>#adjinput{
    max-width:200px !important;
    width:40px;
    min-width:40px;
    font-size:11px;
}
</code></pre>

<p>EDIT: Another solution is to havethe user type what he wants and on blur (focus out), grab the string (in the same font size) place it in a div - count the div's width - and then with a nice animate with a cool easing effect update the input fields width. The only drawback is that the input field will remain "small" while the user types. Or you can add a timeout : )  you can check such a kind of solution on the fiddle above too!</p>


blocks|key|303831|text|下面是一个仅包含CSS和的示例|type|unstyled|depth|inlineStyleRanges|entityRanges|data|303832|303833|CSS|offset|length|style|BOLD|303834|span+
{
++++border:+solid+1px+black;
}
div+
{
++++max-width:+200px;+++
}|code-block|syntax|javascript|303835|HTML|303836|<div>
++++<span+contenteditable="true">sdfsd</span>
</div>|303837|303838|关于contenteditable的重要说明|CODE|303839|将HTML元素设为contenteditable可以让用户将复制的HTML元素粘贴到该元素中。这对于您的用例可能并不理想，因此在选择使用它时请牢记这一点。|303840|entityMap^0|0|0|0|3|0|0|0|4|0|0|0|2|F|0|9|F|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|10|8|@]|9|@]|A|$]]|$1|C|3|D|5|6|7|11|8|@$E|12|F|13|G|H]]|9|@]|A|$]]|$1|I|3|J|5|K|7|14|8|@]|9|@]|A|$L|M]]|$1|N|3|O|5|6|7|15|8|@$E|16|F|17|G|H]]|9|@]|A|$]]|$1|P|3|Q|5|K|7|18|8|@]|9|@]|A|$L|M]]|$1|R|3|-4|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1A|8|@$E|1B|F|1C|G|U]]|9|@]|A|$]]|$1|V|3|W|5|6|7|1D|8|@$E|1E|F|1F|G|U]]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|Y|$]]

<p>Here is an example with only CSS and <a href="https://developer.mozilla.org/en/html/content_editable" rel="nofollow noreferrer"><strong>Content Editable</strong></a>:</p>
<p><a href="http://jsfiddle.net/YZPmC/" rel="nofollow noreferrer"><strong>jsFiddle Example</strong></a></p>
<p><strong>CSS</strong></p>
<pre><code>span 
{
    border: solid 1px black;
}
div 
{
    max-width: 200px;   
}
</code></pre>
<p><strong>HTML</strong></p>
<pre><code>&lt;div&gt;
    &lt;span contenteditable=&quot;true&quot;&gt;sdfsd&lt;/span&gt;
&lt;/div&gt;
</code></pre>
<hr />
<h3>Important note regarding <code>contenteditable</code></h3>
<p>Making an HTML element <code>contenteditable</code> lets users paste copied HTML elements inside of this element. This may not be ideal for your use case, so keep that in mind when choosing to use it.</p>


blocks|key|304804|text|我只是为你写了这篇文章，希望你喜欢:)不能保证它是跨浏览器的，但我认为它是:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|304805|(function(){
++++var+min+=+100,+max+=+300,+pad_right+=+5,+input+=+document.getElementById('adjinput');

++++input.style.width+=+min%2B'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,+"&amp;")
+++++++++++++++++++++++++++++++++++++++.replace(/</g,+"&lt;")
+++++++++++++++++++++++++++++++++++++++.replace(/>/g,+"&gt;")
+++++++++++++++++++++++++++++++++++++++.replace(/"/g,+"&quot;")
+++++++++++++++++++++++++++++++++++++++.replace(/'/g,+"&#039;")
+++++++++++++++++++++++++++++++++++++++.replace(/+/g,+'&nbsp;');
++++++++++++input.parentNode.appendChild(tmp);
++++++++++++var+width+=+tmp.clientWidth%2Bpad_right%2B1;
++++++++++++tmp.parentNode.removeChild(tmp);
++++++++++++if(min+<=+width+&&+width+<=+max)
++++++++++++++++input.style.width+=+width%2B'px';
++++++++},+1);
++++}
})();|code-block|syntax|javascript|304806|JSFiddle|offset|length|304807|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Paulpro/adpBM/^0|0|0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>I just wrote this for you, I hope you like it :) No guarantees that it's cross-browser, but I think it is :)</p>

<pre><code>(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(/&amp;/g, "&amp;amp;")
                                       .replace(/&lt;/g, "&amp;lt;")
                                       .replace(/&gt;/g, "&amp;gt;")
                                       .replace(/"/g, "&amp;quot;")
                                       .replace(/'/g, "&amp;#039;")
                                       .replace(/ /g, '&amp;nbsp;');
            input.parentNode.appendChild(tmp);
            var width = tmp.clientWidth+pad_right+1;
            tmp.parentNode.removeChild(tmp);
            if(min &lt;= width &amp;&amp; width &lt;= max)
                input.style.width = width+'px';
        }, 1);
    }
})();
</code></pre>

<p><a href="http://jsfiddle.net/Paulpro/adpBM/">JSFiddle</a></p>


blocks|key|3759165|text|来自：Is+there+a+jQuery+autogrow+plugin+for+text+fields?|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3759166|3759167|点击此处查看演示：http://jsbin.com/ahaxe|3759168|插件：|3759169|(function($){

++++$.fn.autoGrowInput+=+function(o)+{

++++++++o+=+$.extend({
++++++++++++maxWidth:+1000,
++++++++++++minWidth:+0,
++++++++++++comfortZone:+70
++++++++},+o);

++++++++this.filter('input:text').each(function(){

++++++++++++var+minWidth+=+o.minWidth+%7C%7C+$(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+%2B+whether+to+change
++++++++++++++++++++var+testerWidth+=+testSubject.width(),
++++++++++++++++++++++++newWidth+=+(testerWidth+%2B+o.comfortZone)+>=+minWidth+?+testerWidth+%2B+o.comfortZone+:+minWidth,
++++++++++++++++++++++++currentWidth+=+input.width(),
++++++++++++++++++++++++isValidWidthChange+=+(newWidth+<+currentWidth+&&+newWidth+>=+minWidth)
+++++++++++++++++++++++++++++++++++++++++++++%7C%7C+(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);|code-block|syntax|javascript|3759170|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/931207/is-there-a-jquery-autogrow-plugin-for-text-fields|1|http://jsbin.com/ahaxe^0|3|1E|0|0|0|9|M|1|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|-4|5|6|7|11|8|@]|9|@]|C|$]]|$1|E|3|F|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|G|3|H|5|6|7|16|8|@]|9|@]|C|$]]|$1|I|3|J|5|K|7|17|8|@]|9|@]|C|$L|M]]|$1|N|3|-4|5|6|7|18|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]|V|$5|Q|R|S|C|$T|W]]]]

<p>From: <a href="https://stackoverflow.com/questions/931207/is-there-a-jquery-autogrow-plugin-for-text-fields">Is there a jQuery autogrow plugin for text fields?</a></p>

<hr>

<p>See a demo here: <a href="http://jsbin.com/ahaxe" rel="nofollow noreferrer">http://jsbin.com/ahaxe</a></p>

<p>The plugin:</p>

<pre><code>(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 = $('&lt;tester/&gt;').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(/&amp;/g, '&amp;amp;').replace(/\s/g,'&amp;nbsp;').replace(/&lt;/g, '&amp;lt;').replace(/&gt;/g, '&amp;gt;');
                    testSubject.html(escaped);

                    // Calculate new width + whether to change
                    var testerWidth = testSubject.width(),
                        newWidth = (testerWidth + o.comfortZone) &gt;= minWidth ? testerWidth + o.comfortZone : minWidth,
                        currentWidth = input.width(),
                        isValidWidthChange = (newWidth &lt; currentWidth &amp;&amp; newWidth &gt;= minWidth)
                                             || (newWidth &gt; minWidth &amp;&amp; newWidth &lt; o.maxWidth);

                    // Animate width
                    if (isValidWidthChange) {
                        input.width(newWidth);
                    }

                };

            testSubject.insertAfter(input);

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

        });

        return this;

    };

})(jQuery);
</code></pre>


blocks|key|3759220|text|如何以编程方式修改输入的size属性？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3759221|从语义上讲，这种解决方案比公认的解决方案更好，因为它仍然使用输入字段进行用户输入，但它确实引入了一些jQuery。Soundcloud为他们的标签做了类似的事情。|3759222|<input+size="1"+/>

$('input').on('keydown',+function(evt)+{
++++var+$this+=+$(this),
++++++++size+=+parseInt($this.attr('size'),+10),
++++++++isValidKey+=+(evt.which+>=+65+&&+evt.which+<=+90)+%7C%7C+//+a-zA-Z
+++++++++++++++++++++(evt.which+>=+48+&&+evt.which+<=+57)+%7C%7C+//+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+%2B+1);
++++}
});|code-block|syntax|javascript|3759223|http://jsfiddle.net/Vu9ZT/|offset|length|3759224|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|Q|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|W|8|@]|9|@$K|X|L|Y|1|Z]]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|J]]]]

<p>How about programmatically modifying the size attribute on the input?</p>

<p>Semantically (imo), this solution is better than the accepted solution because it still uses input fields for user input but it does introduce a little bit of jQuery. Soundcloud does something similar to this for their tagging.</p>

<pre><code>&lt;input size="1" /&gt;

$('input').on('keydown', function(evt) {
    var $this = $(this),
        size = parseInt($this.attr('size'), 10),
        isValidKey = (evt.which &gt;= 65 &amp;&amp; evt.which &lt;= 90) || // a-zA-Z
                     (evt.which &gt;= 48 &amp;&amp; evt.which &lt;= 57) || // 0-9
                     evt.which === 32;

    if ( evt.which === 8 &amp;&amp; size &gt; 0 ) {
        // backspace
        $this.attr('size', size - 1);
    } else if ( isValidKey ) {
        // all other keystrokes
        $this.attr('size', size + 1);
    }
});
</code></pre>

<p><a href="http://jsfiddle.net/Vu9ZT/" rel="noreferrer">http://jsfiddle.net/Vu9ZT/</a></p>


blocks|key|2145493|text|如果将跨度设置为display:+inline-block，则自动调整水平和垂直大小的效果非常好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2145494|​|2145495|<span+contenteditable="true"+
++++++style="display:+inline-block;
+++++++++++++border:+solid+1px+black;
+++++++++++++min-width:+50px;+
+++++++++++++max-width:+200px">
</span>|code-block|syntax|javascript|2145496|2145497|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>If you set the span to display: inline-block, automatic horizontal and vertical resizing works very well:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span contenteditable="true" 
      style="display: inline-block;
             border: solid 1px black;
             min-width: 50px; 
             max-width: 200px"&gt;
&lt;/span&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3759284|text|我知道这是一个非常古老的帖子--但我的答案可能对其他人有用，所以这里是这样的。我发现，如果我为contenteditable+div定义的CSS样式的最小高度为200，而不是高度200，那么div会自动缩放。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3759285|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>I know this is a seriously old post - 
but my answer might be useful to others anyway, so here goes.
I found that if my CSS style definition for the contenteditable div has a min-height of 200 instead of a height of 200 , then the div scales automatically.</p>


blocks|key|4044158|text|如果您只对增长感兴趣，那么只要input元素的内容发生变化，就可以将width更新为scrollWidth。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4044159|document.querySelectorAll('input[type="text"]').forEach(function(node)+{
++node.onchange+=+node.oninput+=+function()+{
++++node.style.width+=+node.scrollWidth%2B'px';
++};
});|code-block|syntax|javascript|4044160|但这不会缩小元素。|4044161|entityMap^0|F|5|Y|5|16|B|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

<p>If you are just interested in growing, you can update the <code>width</code> to <code>scrollWidth</code>, whenever the content of the <code>input</code> element changes.</p>

<pre><code>document.querySelectorAll('input[type="text"]').forEach(function(node) {
  node.onchange = node.oninput = function() {
    node.style.width = node.scrollWidth+'px';
  };
});
</code></pre>

<p>But this will not shrink the element.</p>


blocks|key|4044209|text|当然，使用哪种方法取决于您的最终目标是什么。如果你想用表单提交结果，那么使用原生表单元素意味着你不必使用脚本来提交。此外，如果脚本被关闭，那么后备仍然可以工作，而不会产生花哨的增长-收缩效果。如果希望从内容可编辑元素中获得纯文本，还可以使用node.textContent之类的脚本来去掉浏览器在用户输入中插入的html。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4044210|这个版本使用了原生的表单元素，并对之前的一些帖子进行了轻微的改进。|4044211|它还允许内容缩小。|4044212|将其与CSS结合使用可实现更好的控制。|4044213|<html>

<textarea></textarea>
<br>
<input+type="text">


<style>

textarea+{
++width:+300px;
++min-height:+100px;
}

input+{
++min-width:+300px;
}


<script>

document.querySelectorAll('input[type="text"]').forEach(function(node)+{
++var+minWidth+=+parseInt(getComputedStyle(node).minWidth)+%7C%7C+node.clientWidth;
++node.style.overflowX+=+'auto';+//+'hidden'
++node.onchange+=+node.oninput+=+function()+{
++++node.style.width+=+minWidth+%2B+'px';
++++node.style.width+=+node.scrollWidth+%2B+'px';
++};
});|code-block|syntax|javascript|4044214|您可以对元素使用类似的东西|4044215|document.querySelectorAll('textarea').forEach(function(node)+{
++var+minHeight+=+parseInt(getComputedStyle(node).minHeight)+%7C%7C+node.clientHeight;
++node.style.overflowY+=+'auto';+//+'hidden'
++node.onchange+=+node.oninput+=+function()+{
++++node.style.height+=+minHeight+%2B+'px';
++++node.style.height+=+node.scrollHeight+%2B+'px';
++};
});|4044216|这不会在Chrome上闪烁，结果可能会在其他浏览器上有所不同，所以测试一下。|4044217|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|X|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>Which approach you use, of course, depends on what your end goal is. If you want to submit the results with a form then using native form elements means you don't have to use scripting to submit. Also, if scripting is turned off then the fallback still works without the fancy grow-shrink effects. If you want to get the plain text out of a <em>contenteditable</em> element you can always also use scripting like <em>node.textContent</em> to strip out the html that the browsers insert in the user input.</p>

<p>This version uses native form elements with slight refinements on some of the previous posts.</p>

<p>It allows the content to shrink as well.</p>

<p>Use this in combination with CSS for better control.</p>

<pre><code>&lt;html&gt;

&lt;textarea&gt;&lt;/textarea&gt;
&lt;br&gt;
&lt;input type="text"&gt;


&lt;style&gt;

textarea {
  width: 300px;
  min-height: 100px;
}

input {
  min-width: 300px;
}


&lt;script&gt;

document.querySelectorAll('input[type="text"]').forEach(function(node) {
  var minWidth = parseInt(getComputedStyle(node).minWidth) || node.clientWidth;
  node.style.overflowX = 'auto'; // 'hidden'
  node.onchange = node.oninput = function() {
    node.style.width = minWidth + 'px';
    node.style.width = node.scrollWidth + 'px';
  };
});
</code></pre>

<p>You can use something similar with &lt;textarea> elements</p>

<pre><code>document.querySelectorAll('textarea').forEach(function(node) {
  var minHeight = parseInt(getComputedStyle(node).minHeight) || node.clientHeight;
  node.style.overflowY = 'auto'; // 'hidden'
  node.onchange = node.oninput = function() {
    node.style.height = minHeight + 'px';
    node.style.height = node.scrollHeight + 'px';
  };
});
</code></pre>

<p>This doesn't flicker on Chrome, results may vary on other browsers, so test.</p>


blocks|key|3759429|text|这里有一个对我有效的方法。当您在字段中键入内容时，它会将该文本放入隐藏范围，然后获取其新宽度并将其应用于输入字段。它会随着你的输入而增长和缩小，当你删除所有输入时，它会保护你的输入几乎消失。在Chrome上测试过。(编辑:在编辑时适用于Safari、Firefox和Edge+)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3759430|​|3759431|function+travel_keyup(e)
{
++++if+(e.target.value.length+==+0)+return;
++++var+oSpan=document.querySelector('#menu-enter-travel+span');
++++oSpan.textContent=e.target.value;
++++match_span(e.target,+oSpan);
}
function+travel_keydown(e)
{
++++if+(e.key.length+==+1)
++++{
++++++++if+(e.target.maxLength+==+e.target.value.length)+return;
++++++++var+oSpan=document.querySelector('#menu-enter-travel+span');
++++++++oSpan.textContent=e.target.value+%2B+''+%2B+e.key;
++++++++match_span(e.target,+oSpan);
++++}
}
function+match_span(oInput,+oSpan)
{
++++oInput.style.width=oSpan.getBoundingClientRect().width+%2B+'px';
}

window.addEventListener('load',+function()
{
++++var+oInput=document.querySelector('#menu-enter-travel+input');
++++oInput.addEventListener('keyup',+travel_keyup);
++++oInput.addEventListener('keydown',+travel_keydown);

++++match_span(oInput,+document.querySelector('#menu-enter-travel+span'));
});|code-block|syntax|javascript|3759432|#menu-enter-travel+input
{
	width:+8px;
}
#menu-enter-travel+span
{
	visibility:+hidden;
++++position:+absolute;
++++top:+0px;
++++left:+0px;
}|3759433|<div+id="menu-enter-travel">
<input+type="text"+pattern="%5E[0-9]{1,4}$"+maxlength="4">KM
<span>9</span>
</div>|3759434|3759435|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Here's a method that worked for me.  When you type into the field, it puts that text into the hidden span, then gets its new width and applies it to the input field.  It grows and shrinks with your input, with a safeguard against the input virtually disappearing when you erase all input.  Tested in Chrome. (EDIT: works in Safari, Firefox and Edge at the time of this edit)</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function travel_keyup(e)
{
    if (e.target.value.length == 0) return;
    var oSpan=document.querySelector('#menu-enter-travel span');
    oSpan.textContent=e.target.value;
    match_span(e.target, oSpan);
}
function travel_keydown(e)
{
    if (e.key.length == 1)
    {
        if (e.target.maxLength == e.target.value.length) return;
        var oSpan=document.querySelector('#menu-enter-travel span');
        oSpan.textContent=e.target.value + '' + e.key;
        match_span(e.target, oSpan);
    }
}
function match_span(oInput, oSpan)
{
    oInput.style.width=oSpan.getBoundingClientRect().width + 'px';
}

window.addEventListener('load', function()
{
    var oInput=document.querySelector('#menu-enter-travel input');
    oInput.addEventListener('keyup', travel_keyup);
    oInput.addEventListener('keydown', travel_keydown);

    match_span(oInput, document.querySelector('#menu-enter-travel span'));
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#menu-enter-travel input
{
	width: 8px;
}
#menu-enter-travel span
{
	visibility: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="menu-enter-travel"&gt;
&lt;input type="text" pattern="^[0-9]{1,4}$" maxlength="4"&gt;KM
&lt;span&gt;9&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4044299|text|如果允许使用ch度量(monospaced)，它完全解决了我想要做的事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4044300|onChange(e+=>+{
++++e.target.style.width+=+`${e.target.length}ch`;
})|code-block|syntax|javascript|4044301|这正是我需要的，但我不确定它是否适用于动态宽度字体系列。|4044302|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>If you're allowed to use the ch measurement (monospaced) it completely solved what I was trying to do.</p>
<pre class="lang-js prettyprint-override"><code>onChange(e =&gt; {
    e.target.style.width = `${e.target.length}ch`;
})
</code></pre>
<p>This was exactly what I needed but I'm not sure if it works for dynamic width font-families.</p>


blocks|key|4044348|text|对于那些严格寻找适用于输入或文本区域的解决方案的人来说，this是我遇到的最简单的解决方案。只有几行CSS和一行JS。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4044349|JavaScript在元素上设置一个等于输入值的|4044350|+-*属性。输入是在CSS网格中设置的，其中该网格是一个使用data-*属性作为其内容的伪元素。该内容根据输入值将网格拉伸到合适的大小。|blockquote|4044351|4044352|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/auto-growing-inputs-textareas/#other-ideas^0|S|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|X|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]]]

<p>For those strictly looking for a solution that works for input or textarea, <a href="https://css-tricks.com/auto-growing-inputs-textareas/#other-ideas" rel="nofollow noreferrer">this</a> is the simplest solution I've came across. Only a few lines of CSS and one line of JS.</p>
<blockquote>
<p>The JavaScript sets a data-* attribute on the element equal to the
value of the input. The input is set within a CSS grid, where that
grid is a pseudo-element that uses that data-* attribute as its
content. That content is what stretches the grid to the appropriate
size based on the input value.</p>
</blockquote>


blocks|key|3759559|text|您所需要做的就是，获取您想要在输入时增长的输入域的元素，在CSS中，将输入的宽度设置为auto，并将最小宽度设置为50px。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3759560|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>All you need to do is, get the element of the input field you want to grow as you type and in CSS, set the width of the input to auto and set a min-width to say 50px.</p>


blocks|key|2145840|text|您可以使用display:+inline-grid实现这一点|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2145841|​|2145842|const+dummy+=+document.querySelector(".dummy");
const+input+=+document.querySelector("input");

const+update+=+()+=>+dummy.innerText+=+input.value;
input.oninput+=+update;
update();|code-block|syntax|javascript|2145843|.growing-input+{
++display:+inline-grid;
}

.growing-input+.dummy,
.growing-input+input+{
++grid-area:+1+/+1;
++
++/*+Following+properties+just+need+to+be+consistent,
++to+ensure+the+.dummy+and+the+input+take+up+the+same+space+*/
++font:+inherit;
++padding:+0+0.25em;
++margin:+0;
++border:+1px+solid+grey;
++border-radius:+2px;
}

.growing-input+.dummy+{
++visibility:+hidden;
++white-space:+pre-wrap;
}|2145844|Here's+an+
<span+class="growing-input">
++<input+type="text"+value="auto-resizing+input"+size="1"+/>
++<span+class="dummy"></span>
</span>;+have+fun!|2145845|2145846|其思想是创建一个包含与input相同内容的虚拟元素，然后设置input宽度以匹配虚拟元素的宽度。上面我们使用JavaScript来同步文本，并使用display:+inline-grid技巧来设置匹配的input宽度。|2145847|(此方法取自this+article；我已将其压缩为最基本的内容。)|2145848|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/auto-growing-inputs-textareas/#other-ideas^0|5|K|0|0|0|0|0|0|B|5|U|5|21|K|2T|5|0|6|C|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|O|3|P|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|Q|3|G|5|6|7|1A|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1B|8|@$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|T|3|U|5|6|7|1K|8|@]|D|@$9|1L|A|1M|1|1N]]|E|$]]|$1|V|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]]|W|$X|$5|Y|Z|10|E|$11|12]]]]

<p>You can do this with <code>display: inline-grid</code>:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const dummy = document.querySelector(".dummy");
const input = document.querySelector("input");

const update = () =&gt; dummy.innerText = input.value;
input.oninput = update;
update();</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.growing-input {
  display: inline-grid;
}

.growing-input .dummy,
.growing-input input {
  grid-area: 1 / 1;
  
  /* Following properties just need to be consistent,
  to ensure the .dummy and the input take up the same space */
  font: inherit;
  padding: 0 0.25em;
  margin: 0;
  border: 1px solid grey;
  border-radius: 2px;
}

.growing-input .dummy {
  visibility: hidden;
  white-space: pre-wrap;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>Here's an 
&lt;span class="growing-input"&gt;
  &lt;input type="text" value="auto-resizing input" size="1" /&gt;
  &lt;span class="dummy"&gt;&lt;/span&gt;
&lt;/span&gt;; have fun!</code></pre>
</div>
</div>
</p>
<p>The idea is to create a dummy element containing the same content as the <code>input</code>, then set the <code>input</code> width to match that of the dummy element. Above we use JavaScript to synchronize the text, and a <code>display: inline-grid</code> trick to set the <code>input</code> width to match.</p>
<p>(This approach is taken from <a href="https://css-tricks.com/auto-growing-inputs-textareas/#other-ideas" rel="nofollow noreferrer">this article</a>; I've condensed it to the bare essentials.)</p>


<p>I can set initial text input size in css, like so:</p>

<pre><code>width: 50px;
</code></pre>

<p>But I would like it to grow when I type until it reaches for example 200px.
Can this be done in straight css, html, preferably without javascript?</p>

<p>Do post your js/jquery solutions too of course, but if this is doable without them - that be great.</p>

<p>my try here:</p>

<p><a href="http://jsfiddle.net/jszjz/2/" rel="noreferrer">http://jsfiddle.net/jszjz/2/</a></p>


make html text input field grow as I type?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我可以在css中设置初始文本输入大小，如下所示：width: 50px;但我希望当我输入时，它会增长，直到达到例如200px。这可以直接用css，html来实现吗，最好不要javascript？当然，也要发布你的js/jquery解决方案，但如果没有它们也可以做到-那就太好了。我在这里试试：

问是否使html文本输入字段随着我的键入而增长？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否使html文本输入字段随着我的键入而增长？EN