更新答案https://stackoverflow.com/a/41389961/1022684

如果你有多个输入并且不想重复输入文本:

  $(() => {
    $('.container input').on('input', (e) => {
      $(e.target).prev().text($(e.target).val())
    })  
    $('.container input').each((idx, elem) => {
      $(elem).prev().text($(elem).val())
    })
  })

为什么不使用css呢?

<div id="wrapper">
  <input onkeyup="keyup(event)">
  <div id="ghost"></div>
</div>

函数keyup(e) { . getelementbyid(“鬼”)。innerText = e.target.value; ｝ #包装{ 位置:相对; min-width: 30 px; 显示:inline-block; ｝ 输入{ 位置:绝对的; 左:0; 右:0; 边框:1px纯蓝色; 宽度:100%; ｝ #鬼{ 颜色:透明; ｝ < div id = "包装" > <输入onkeyup = "按键弹起(事件)" > < div id = "鬼" > < / div > < / div >

wrapper {
  position: relative;
  min-width: 30px;
  border: 1px solid red;
  display: inline-block;
}

input {
  position: absolute;
  left:0;
  right:0;
  width: 100%;
}

#ghost {
  color: transparent;
}

这段代码是由@Iain Todd介绍的，我认为我应该分享它

这个答案提供了在浏览器中检索文本宽度的最准确的方法之一，比公认的答案更准确。它使用canvas html5元素，不像其他答案，不将元素添加到DOM，从而避免了过多添加元素到DOM引起的任何回流问题。

阅读更多关于Canvas元素与文本宽度的关系。

注意:根据MDN, getPropertyValue()方法的简写版本(如font)可能不可靠。我建议单独获取值以提高兼容性。我只是为了提高速度才用的。

/** * returns the width of child text of any DOM node as a float */ function getTextWidth(el) { // uses a cached canvas if available var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas")); var context = canvas.getContext("2d"); // get the full font style property var font = window.getComputedStyle(el, null).getPropertyValue('font'); var text = el.value; // set the font attr for the canvas text context.font = font; var textMeasurement = context.measureText(text); return textMeasurement.width; } var input = document.getElementById('myInput'); // listen for any input on the input field input.addEventListener('input', function(e) { var width = Math.floor(getTextWidth(e.target)); // add 10 px to pad the input. var widthInPx = (width + 10) + "px"; e.target.style.width = widthInPx; }, false); #myInput { font: normal normal 400 normal 18px / normal Roboto, sans-serif; min-width: 40px; } <input id="myInput" />

您希望随着文本的更改而更改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} 
/>

  

我真的很喜欢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
});

我认为你误解了最小宽度CSS属性。min-width通常用于在流体布局中定义最小DOM宽度，例如:

input {
  width: 30%;
  min-width: 200px;
}

这将把输入元素的最小宽度设置为200像素。在这里，“px”代表“像素”。

现在，如果您试图在用户提交输入字段时确保输入字段至少包含一个字符，则需要使用JavaScript和PHP进行一些表单验证。如果这确实是你想要做的，我会编辑这个答案，尽我最大的努力帮助你。