如何根據字符的總寬度指定輸入標簽的最大長度

Question

我想知道是否可以設置maxlength以限制字符的總寬度而不是字符數的最大輸入量。

我這樣做是因為用戶輸入的內容將以固定寬度的div（例如3em width div）顯示，如果我將max-length指定為4，則可以顯示“ MMM”或“ 1111”。放入“ MMMM”，它將在div之外。 如果我將max-length指定為3，則用戶無法輸入“ 1111”。 所以我想如果我可以將maxlength設置為3em，那么用戶可以在阻止“ MMMM”的同時輸入“ 1111”。 我試過了：

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

Answer 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來滿足您的需要。因為您需要照顧字體大小，字體等。 因為如果讓瀏覽器決定什么字體類型/大小/等。 使用，那么您可能無法達到您的要求。