<textarea> character limit [duplicate]

Question

What is a cross-browser way to set the maximum number of characters in a textarea, using plain Javascript? maxlength does not work for textareas on Opera and IE9 and below (though it works on all major browsers for inputs).

Once the character limit is reached, the textarea should not allow more characters to be entered. Text pasted either with Ctrl+V or the right-click context menu should be cut off at the character limit. This means a solution that uses only onkey___ events is not sufficient.

That may answer your question

Black Sheep
– Black Sheep

2013-08-24 18:17:42 +00:00
Commented Aug 24, 2013 at 18:17 — Black Sheep
– Black Sheep, Commented Aug 24, 2013 at 18:17

Paul S. · Accepted Answer · 2013-08-24 18:15:36Z

Generate functions that will either truncate the value or prevent the Event under your conditions, and then add them as several different listeners for all the events you're interested in.

function snip(len) { return function (e) {e.target.value = e.target.value.slice(0, len);}; } function prevent(len) { return function () { if (e.target.value.length >= len) { e.preventDefault(); return false; } }; } var len = 5; // choose your length however you want var textarea = document.getElementById('texta'), // get the node trunc = snip(len), prev1 = prevent(len), prev2 = prevent(len - 1); textarea.addEventListener('change' , trunc, true); textarea.addEventListener('input' , trunc, true); textarea.addEventListener('keydown' , prev2, true); textarea.addEventListener('keypress', prev2, true); textarea.addEventListener('keyup' , prev1, true); textarea.addEventListener('paste' , trunc, true);

The events may need to be attached differently in IE

DEMO

I'll also point out that these as they are don't cause infinite loops because setting value = value doesn't trigger change/input events, but if you're making other changes it might do, so be careful.
Nice answer! However, this erases text at the end rather than preventing input once max length is reached. Rather than tinker to make it work, I'll just go with maxlength. Who needs Opera and IE9 support anyway? :P

Collectives™ on Stack Overflow

<textarea> character limit [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related