javascript prevent copy/pasting beyond character limit in textarea

Question

I have the following code (pulled from this question) for setting a character limit on textareas.

function maxLength(el) { if (!("maxLength" in el)) { var max = el.attributes.maxLength.value; el.onkeypress = function () { if (this.value.length >= max) return false; }; } } var maxtext = document.getElementsByClassName("maxtext"); for (var i = 0; i < maxtext.length; i++) { maxLength(maxtext[i]); }

And an example of my html for textareas:

<textarea maxlength="150" class="maxtext"></textarea>

This all works just fine in Firefox and Chrome. In IE7+, it will stop me if I type up to the limit, but I'm then able to copy/paste text without restriction.

Any way to modify this script to prevent copy/pasting beyond the max character limit?

Looks like a duplicate of stackoverflow.com/questions/2190420/… — Aaron Kurtzhals
– Aaron Kurtzhals, Commented Mar 22, 2013 at 15:06
possible duplicate of Maxlength for text area doesn't work in IE. Also has a link in the answer to a JavaScript solution. IE7+ will not stop you typing in more than the specified characters by default as maxlength is a HTML5 standard which is only supported from IE10+. — Nope
– Nope, Commented Mar 22, 2013 at 15:09
Not really. You can only detect that something has been pasted and shorten it if necessary. See MediaWiki's byteLimit jQuery plugion for example — Bergi
– Bergi, Commented Mar 22, 2013 at 15:14

Chase · Accepted Answer · 2013-03-22 15:16:00Z

15

Listen for the onpaste event. Once the event fires, grab the text from the clipboard and manipulate it how you like.

HTML

<textarea id="test" maxlength="10" class="maxtext"></textarea>

JAVASCRIPT

var test = document.getElementById("test"); test.onpaste = function(e){ //do some IE browser checking for e var max = test.getAttribute("maxlength"); e.clipboardData.getData('text/plain').slice(0, max); };

EXAMPLE

edited Mar 22, 2013 at 15:16

answered Mar 22, 2013 at 15:10

Chase

29.6k1 gold badge52 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Matthias Kleine Over a year ago

This does not work for me (in Chrome). The slice of the text hast no effect of the clipboard value. Remove the "maxlength" attribute and max var, change the second parameter of "slice" to 3 and paste a longer text. Result: Longer text inside of the box

Chase Over a year ago

@MatthiasKleine - Chrome respects the maxlength property when pasting into a text field. The above question was that IE7+ was not. You shouldn't need to listen for the onpaste event for Chrome. Run this example in Chrome: jsfiddle.net/4d0o2u1x You should notice that the maxlength attribute actually works as you would expect.

Nash Carp Over a year ago

I am trying to get this to work for a <div> with attribute contenteditable="true". In my case it only works if I paste the longer text and then push "Ctrl" again. Other wise I can paste and submit the longer text. Anyone has idea's?

Shuping · Accepted Answer · 2013-03-22 15:09:41Z

You could listen to the onchange event to check the content length, if exceeds the limit then subtract it.

Collectives™ on Stack Overflow

javascript prevent copy/pasting beyond character limit in textarea

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related