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 http://stackoverflow.com/questions/2190420/limit-how-many-characters-can-be-pasted-in-textarea?rq=1 — Aaron Kurtzhals, Mar 22 '13 at 15:06
possible duplicate of [**Maxlength for text area doesn't work in IE**](http://stackoverflow.com/questions/9109313/maxlength-for-text-area-doesnt-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, Mar 22 '13 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](https://gerrit.wikimedia.org/r/gitweb?p=mediawiki/core.git;a=blob;f=resources/jquery/jquery.byteLimit.js;hb=HEAD) for example — Bergi, Mar 22 '13 at 15:14

Chase · Accepted Answer · 2013-03-22T15:16:00.443

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 '13 at 15:16

answered Mar 22 '13 at 15:10

Chase

29,019
1
49
48

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 – Matthias Kleine Sep 23 '14 at 14:49
@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: http://jsfiddle.net/4d0o2u1x/ You should notice that the `maxlength` attribute actually works as you would expect. – Chase Sep 23 '14 at 17:51
I am trying to get this to work for a `
` 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?
– Nash Carp Nov 09 '17 at 13:52

score 0 · Answer 2 · answered Mar 22 '13 at 15:09

0

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

answered Mar 22 '13 at 15:09

Shuping

5,388
6
43
66

javascript prevent copy/pasting beyond character limit in textarea

2 Answers2

Linked