在现代浏览器版本中，CSS单元ch也是可用的。根据我的理解，它是一个与字体无关的单位，其中1ch等于任何给定字体中字符0(零)的宽度。

因此，通过绑定到输入事件，像下面这样简单的东西可以用作resize函数:

var input = document.querySelector('input');//获取输入元素 输入。addEventListener(“输入”,resizeInput);//在"input"事件上绑定"resizeInput"回调 resizeInput.call(输入);//立即调用函数 函数resizeInput() { This.style.width = this.value.length + "ch"; ｝ 输入{字体大小:1.3 em;填充:.5em;｝ < >标签文本 <输入> < / >标签

该示例将输入大小调整为值的长度+ 2个字符。

单位ch的一个潜在问题是，在许多字体(如Helvetica)中，字符“m”的宽度超过字符0的宽度，而字符“i”要窄得多。1ch通常比字符平均宽度宽，根据这篇文章，通常是20-30%左右。

您希望随着文本的更改而更改size属性。

# react

const resizeInput = (e) => {
  e.target.setAttribute('size', e.target.value.length || 1);
}

<input 
  onChange={resizeInput}
  size={(propertyInput.current && propertyInput.current.value.length) || 1}
  ref={propertyInput} 
/>

  

这是我的两分钱。 创建一个空的不可见的div。用输入内容填充它，并返回输入字段的宽度。匹配每个框之间的文本样式。

$(".answers_number").keyup(function(){ $( "#number_box" ).html( $( this ).val() ); $( this ).animate({ width: $( "#number_box" ).width()+20 }, 300, function() { }); }); #number_box { position: absolute; visibility: hidden; height: auto; width: auto; white-space: nowrap; padding:0 4px; /*Your font styles to match input*/ font-family:Arial; font-size: 30px; } .answers_number { font-size: 30px; font-family:Arial; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="number" class="answers_number" /> <div id="number_box"> </div>

下面是一个简单的函数来获取所需的内容:

function resizeInput() {
    const input = document.getElementById('myInput');
    input.style.width = `${input.scrollWidth}px`;
};

下面是使用DIV和' contentteditable '属性来解决这个问题的另一种方法:

HTML:

<div contenteditable = "true" class = "fluidInput" data-placeholder = ""></div>

CSS:(给DIV一些维度，使它更容易看到)

.fluidInput {

    display         : inline-block;
    vertical-align  : top;

    min-width       : 1em;
    height          : 1.5em;

    font-family     : Arial, Helvetica, sans-serif;
    font-size       : 0.8em;
    line-height     : 1.5em;

    padding         : 0px 2px 0px 2px;
    border          : 1px solid #aaa;
    cursor          : text;
}


.fluidInput * {

    display         : inline;

}


.fluidInput br  {

    display         : none;

}


.fluidInput:empty:before {

    content         : attr(data-placeholder);
    color           : #ccc;

}

注意:如果你计划在你计划提交的FORM元素中使用这个，你将需要使用Javascript / jQuery来捕获提交事件，这样你就可以解析DIV的“值”(分别是. innerhtml或.html())。

我真的很喜欢Lyth的回答，但也真的希望它是:

处理退格和删除 不需要手动添加相邻标签。 强制最小宽度。 自动应用于具有特定类的元素

我改编了他的JSFiddle，想出了这个。在这个小提琴中没有出现的一个改进是使用像jQuery CSS解析器这样的东西来实际读取输入的初始宽度。textbox-autosize规则，并使用它作为minWidth。对的，我只是在上面使用一个属性，这使得一个紧凑的演示，但不是理想的。因为每个输入都需要一个额外的属性。你可能还想在JavaScript中把minWidth设置为100。

HTML:

<div id='applicationHost'>
<div>Name:   <input class='textbox-autosize' data-min-width='100' type="text" /></div>
<div>Email:  <input class='textbox-autosize' data-min-width='100' type="email" /></div>
<div>Points: <input class='textbox-autosize' data-min-width='100' type="number" /></div>
</div>

CSS:

#applicationHost {
    font-family: courier;
    white-space: pre;
}

input.textbox-autosize, span.invisible-autosize-helper {
    padding:0;
    font-size:12px;
    font-family:Sans-serif; 
    white-space:pre;
}
input.textbox-autosize {
    width: 100px; /* Initial width of textboxes */
}

/*
In order for the measurements to work out, your input and the invisible
span need to have the same styling.
*/

JavaScript:

$('#applicationHost').on('keyup', '.textbox-autosize', function(e) {
    // Add an arbitary buffer of 15 pixels.
    var whitespaceBuffer = 15;
    var je = $(this);
    var minWidth = parseInt(je.attr('data-min-width'));
    var newVal = je.val();
    var sizingSpanClass = 'invisible-autosize-helper';
    var $span = je.siblings('span.' + sizingSpanClass).first();
    // If this element hasn't been created yet, we'll create it now.
    if ($span.length === 0) {
        $span = $('<span/>', {
            'class': sizingSpanClass,
            'style': 'display: none;'
        });
        je.parent().append($span);
    }
    $span = je.siblings('span').first();
    $span.text(newVal) ; // the hidden span takes 
    // the value of the input
    $inputSize = $span.width();
    $inputSize += whitespaceBuffer;
    if($inputSize > minWidth)
        je.css("width", $inputSize) ; // apply width of the span to the input
    else
        je.css("width", minWidth) ; // Ensure we're at the min width
});