Disable text input without disabling text area

Question

I have a text area. Once it has reached a certain character limit I want to disable the users ability to enter anymore text, but allow them to press backspace and/or delete some text.

I have tried:

.prop('disabled', true);

However, this does disable the users ability to add more text, it disables the text area, not allowing the user to delete some text, via the delete button, backspace etc.

Is this possible? If so, how do i do it?

Answer 1

As Gruff Bunny said, maxlength is the shortest and easiest way to go:

DEMO

However, Chrome does not support this regarding text, but for numbers by doing like so (example):

<input type="number" max="10" />

There is however a possible way to go around this issue regarding Chrome, further reading:

http://www.wufoo.com/html5/attributes/03-maxlength.html