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

  

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

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

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

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

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

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

你可以设置大小属性。 如果你正在使用一个响应式框架，下面的代码就足够了:

<input size="{{ yourValue.length }}" [value]="yourValue" />

但如果你使用纯js，你应该设置事件处理程序，像这样:

<input oninput="this.setAttribute('size', this.value.length)" />

你可以这样做

// HTML
<input id="input" type="text" style="width:3px" />
// jQuery
$(function(){
  $('#input').keyup(function(){
    $('<span id="width">').append( $(this).val() ).appendTo('body');
    $(this).width( $('#width').width() + 2 );
    $('#width').remove();
  });
});

​

​

一个无懈可击的通用方法是:

考虑所有可能的测量输入元素的样式 能够在任何输入上应用测量，而无需修改HTML或

Codepen演示

var getInputValueWidth = (function(){ // https://stackoverflow.com/a/49982135/104380 function copyNodeStyle(sourceNode, targetNode) { var computedStyle = window.getComputedStyle(sourceNode); Array.from(computedStyle).forEach(key => targetNode.style.setProperty(key, computedStyle.getPropertyValue(key), computedStyle.getPropertyPriority(key))) } function createInputMeassureElm( inputelm ){ // create a dummy input element for measurements var meassureElm = document.createElement('span'); // copy the read input's styles to the dummy input copyNodeStyle(inputelm, meassureElm); // set hard-coded styles needed for propper meassuring meassureElm.style.width = 'auto'; meassureElm.style.position = 'absolute'; meassureElm.style.left = '-9999px'; meassureElm.style.top = '-9999px'; meassureElm.style.whiteSpace = 'pre'; meassureElm.textContent = inputelm.value || ''; // add the meassure element to the body document.body.appendChild(meassureElm); return meassureElm; } return function(){ return createInputMeassureElm(this).offsetWidth; } })(); // delegated event binding document.body.addEventListener('input', onInputDelegate) function onInputDelegate(e){ if( e.target.classList.contains('autoSize') ) e.target.style.width = getInputValueWidth.call(e.target) + 'px'; } input{ font-size:1.3em; padding:5px; margin-bottom: 1em; } input.type2{ font-size: 2.5em; letter-spacing: 4px; font-style: italic; } <input class='autoSize' value="type something"> <br> <input class='autoSize type2' value="here too">