调整输入字段的宽度以适应其输入

<input type="text" value="1" style="min-width:1px;" />

这是我的代码，它不起作用。 HTML、JavaScript、PHP 或 CSS 中是否有其他方法来设置最小宽度？

我想要一个宽度动态变化的文本输入字段，以便输入字段围绕其内容流动。每个输入都有一个内置填充2em，这就是问题所在，第二个问题是min-width根本不处理输入。

如果我设置的宽度超过了需要的宽度，那么整个程序就会变得混乱，我需要 1px 的宽度，只有在需要的时候才需要更多。

在现代浏览器版本中，CSS单元ch https://css-tricks.com/almanac/properties/f/font-size/#article-header-id-7也可用。据我了解，它是与字体无关的单位，其中1ch等于字符宽度0（零）任何给定的字体。

因此，通过绑定到input event https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event:

var input = document.querySelector('input'); // get the input element
input.addEventListener('input', resizeInput); // bind the "resizeInput" callback on "input" event
resizeInput.call(input); // immediately call the function

function resizeInput() {
  this.style.width = this.value.length + "ch";
}

input{ font-size:1.3em; padding:.5em; }

<label>Text
  <input>
</label>

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

单位 ch 的一个潜在问题是，在许多字体（即 Helvetica）中，字符“m”的宽度超过字符 0 的宽度，而字符“i”则窄得多。 1ch 通常比平均字符宽度宽，根据数据通常宽 20-30% 左右this https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/ post.