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

小编典典

all

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

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

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

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

阅读 67

2022-05-25

共1个答案

小编典典

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

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

注意：此解决方案仅适用于每个字符都非常8px宽的情况。您可以使用代表所选字体中字符“0”的宽度的 CSS-
Unit“ch”（字符）。你可以在这里阅读。

2022-05-25