如何根据字符的总宽度指定输入标签的最大长度答案

【问题标题】：How to specify the maxlength of input tag in terms of the total width of characters如何根据字符的总宽度指定输入标签的最大长度
【发布时间】：2016-05-14 00:42:15
【问题描述】：

我想知道是否可以设置 maxlength 以根据字符的总宽度而不是字符数来限制最大输入。

我这样做是因为用户的输入将显示在一个固定宽度的 div 中，例如 3em 宽度的 div，如果我指定 max-length 为 4，它将能够显示“MMM”或“1111” ，用户可以输入“MMMM”，它会在 div 之外。如果我将最大长度指定为 3，则用户无法输入“1111”。所以我想如果我可以用 3em 设置 maxlength，那么用户可以在防止“MMMM”的同时输入“1111”。我试过了：

<input maxlength="6em" type="text">

【问题讨论】：

使用maxlength 属性是不可能的。
您应该在后端使用表单提交到的.php 脚本执行此操作（检查输入长度）
稍微更广泛的问题会有所帮助！由于没有传统的方法来阻止用户考虑输入文本的 with！
你能再解释一下吗？我不确定您的确切问题是什么。您可能需要更复杂的东西来计算宽度，或者您可以使用 CSS 最大宽度。你需要多解释一下，有很多可能的选项取决于具体的问题。
最简单的解决方案是使用等宽字体（在这种情况下，您将知道每个字符的宽度），并与 maxlength 属性结合使用。

标签： javascript php jquery html css

【解决方案1】：

您可以限制输入的大小和/或长度。

大小限制了可以看到的字符数，maxlenght 是指定允许的最大字符数元素。

<form action="">
  Email: <input type="text" name="email" size="35"><br>
  <!--only 4 digits will be input here but size will be set to 4 for input-->
  PIN: <input type="text" name="pin" maxlength="4" size="4"><br>
  <input type="submit" value="Submit">
</form>

但是，您要问的是需要一些 css 来满足您的需要。因为您需要注意字体大小、字体大小等。因为如果你让浏览器决定什么字体类型/大小/等。使用那么你可能无法达到你的要求。

【讨论】：