如何根据内容长度动态调整输入字段的大小？

根据输入调整输入字段的宽度

问题：使用 HTML 修改输入字段的宽度以符合其内容， JavaScript、PHP 或 CSS 被证明具有挑战性。 min-width 属性无效，固定宽度会导致视觉混乱。

解决方案：

考虑使用 CSS 的 ch 单位，这是一种与字体无关的度量对应于零字符的宽度。通过将调整大小函数绑定到输入事件，可以动态调整输入字段的宽度：

<code class="javascript">var input = document.querySelector('input');
input.addEventListener('input', resizeInput);
resizeInput.call(input);

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

要补充这一点，请应用以下 CSS 样式：

<code class="css">input{ font-size:1.3em; padding:.5em; }</code>

这可确保输入字段会根据其内容的长度调整其宽度，同时保持所需的填充和字体大小。

以上是如何根据内容长度动态调整输入字段的大小？的详细内容。更多信息请关注PHP中文网其他相关文章！