0

If I have for example inputs...

<input type="text" maxlength="10">
<textarea maxlength="20"></textarea>

How would I tell my user, they "have a limit of..." only when attempting add the 11th or 21st char respectively?

Is there an "html" way of handling this, or do we require javascript.

Shane
  • 1,629
  • 3
  • 23
  • 50
  • 1
    Other than the placeholder attribute, you'd need to use JS. – j08691 Feb 26 '15 at 21:27
  • And if you want to implement it using JS, here's a good place to get started. http://stackoverflow.com/questions/451491/what-is-the-best-way-to-emulate-an-html-input-maxlength-attribute-on-an-html-t?rq=1 – Zach Sadler Feb 26 '15 at 21:29

1 Answers1

4

You could to a certain extent use the pattern attribute. For a maxlength of 10 you would write <input type="text" pattern=".{0,10}" />.

Now you would have to display the error message via CSS with help of the :invalid-selector.

Here is an example.

Edit: This doesn't seem to be working with textarea, though … I am having a look into it right now.

dave
  • 4,024
  • 2
  • 18
  • 34
  • 1
    I am playing with your fiddle, and still trying to enter that 11th char, without allowing it to be entered (keeping) the limitation and still having a warning. Your use of CSS deserves an up-vote! – Shane Feb 26 '15 at 21:40
  • Oh, I thought you wanted that message instead of it not being allowed (you cannot submit the form with more than 10 characters, if that is enough?). I don't think that is possible, then. Also textareas suck :D – dave Feb 26 '15 at 21:46
  • Yeah, we already have handled this in JavaScript previously. Using "html" was the new option, but wanted to add a warning using strictly "html". – Shane Feb 26 '15 at 21:53