1

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">
raichuchu
  • 15
  • 1
  • 4
  • That isn't possible using the `maxlength` property. – techfoobar Feb 04 '16 at 12:03
  • You should be doing this in the backend (checking the input length) with your `.php` script that the form is submitted to – moh_abk Feb 04 '16 at 12:03
  • Slightly broader question would help! As there is no conventional way to prevent user considering the with of the entered text! – Rayon Feb 04 '16 at 12:05
  • Can you explain a bit further? I am not sure what is your exact problem. You might need something more complex to calculate your width, or you can use CSS max-width. You need to explain a bit more, there are many possible options dependent on the exact problem. – Armin Feb 04 '16 at 12:06
  • Simplest solution would be to use a mono-spaced font (in which case, you'll know the width per character), in combo with the `maxlength` property. – techfoobar Feb 04 '16 at 12:06
  • The user's 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". – raichuchu Feb 04 '16 at 12:14
  • Related - http://stackoverflow.com/questions/26973570/setting-a-max-character-length-in-css/26975271#26975271 but whatever, this sounds like a design issue not a CSS one. XY Probem I suspect. – Paulie_D Feb 04 '16 at 16:09

1 Answers1

0

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.

Atilla Arda Açıkgöz
  • 827
  • 2
  • 15
  • 29