How to specify the maxlength of input tag in terms of the total width of characters

Question

I wondered if it is possible to set the maxlength to limit the maximum input in terms of the total width of characters, not the number of characters.

I'm doing this because users' input will be displayed in a fixed-width div, say, 3em width div, which will be able to display "MMM" or "1111", if I specify max-length is 4, user may put in "MMMM" which will go outside the div. if I specify max-length with 3, user then can't put in "1111". so I think if I can set maxlength with 3em, then user can put in "1111" while preventing "MMMM". I tried:

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

Answer 1

You can limit size and/or lenght of an input.

Size limits how many characters can be visible and maxlenght is to specify the maximum number of characters allowed in the element.

<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>

However what you asking is requirest some css works for you need.Since you need to take care of font size,family,etc. Because if you let browsers decide what font type/size/etc. to use then you might not achieve what you asked for.