将输入字段的宽度调整为其输入

Question

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

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

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

如果我设置的宽度超过了整个程序所需的宽度，那么我需要 1px 的宽度，只有在需要时才需要更多。

原文由 Kerc 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

听起来您的期望是样式会根据文本框的内容动态应用于文本框的宽度。如果是这样，您将需要一些 js 在文本框内容更改时运行，如下 所示：

 <input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">

注意：此解决方案仅适用于每个字符恰好为 8px 宽的情况。您可以使用 CSS 单元“ch”（字符），它表示所选字体中字符“0”的宽度。你可以 在这里 阅读。

原文由 Tahbaza 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

因此，通过绑定到 input 事件，可以将像下面这样简单的东西用作调整大小函数：

 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% 左右。

原文由 Jani Jalkala 发布，翻译遵循 CC BY-SA 4.0 许可协议