limit how many characters can be pasted in textarea

Question

Is it possible to detect how many characters are being pasted into a HTML textarea, and cancel the paste if beyond a limit?

Edit: what I am trying to do is prevent the user pasting a massive amount of characters (~3 million) because it crashes some browsers. So I want to cancel the paste before their browser locks up. I am making a document editor where users are likely to try this. But they can type as much as they want.

You can't really prevent users to crash their own browsers, they will always find a way to do so :-) — Bergi, Mar 22 '13 at 15:16

score 11 · Accepted Answer · answered Feb 03 '10 at 09:43

11

you can do this on jQuery like this:

$(document).ready(function(){
function limits(obj, limit){

    var text = $(obj).val(); 
    var length = text.length;
    if(length > limit){
       $(obj).val(text.substr(0,limit));
     } else { // alert the user of the remaining char. I do alert here, but you can do any other thing you like
      alert(limit -length+ " characters remaining!");
     }
 }


$('textarea').keyup(function(){

    limits($(this), 20);
})

  })

view a demo here.

answered Feb 03 '10 at 09:43

Reigel Gallarde

64,198
21
121
139

12

Useful when doing copy/paste with keyboard shortcuts or when the user is typing directly in the box, but how do you do it when the user pastes a long text using right click and contextual menu? – Gabriel Sep 03 '10 at 13:25

score 6 · Answer 2 · answered Feb 12 '10 at 11:07

$("textarea").blur(function(event) {
    var maxLength = 3000000;
    var length = this.value.length;
    if (length > maxLength) {
        //reassign substring of max length to text area value
        this.value = this.value.substring(0, maxLength);
        alert(maxLength + ' characters allowed, excess characters trimmed');
    }
});

This jquery attaches the anonymous function to textareas, this will trim the text and alert the user, you can also attach it to the keypress event.

See: http://viralpatel.net/blogs/2008/12/set-maxlength-of-textarea-input-using-jquery-javascript.html for further details on that.

score 2 · Answer 3 · answered Sep 04 '12 at 14:23

You can't access the clipboard content via JS, so you can't prevent it. However, you have three options:

Don't allow the user to paste content (This would a really bad idea for UX).
Use an onPaste event in order to substr the pasted content from 0 to the limit of characters, once it is pasted.
Use a javascript/flash plugin (This will not work on mobile devices).
Use an applet or SilverLight (I don't like this one)

These are just some suggestions, and if you find another way to do this, please let me know it.

score 2 · Answer 4 · answered Feb 03 '10 at 08:05

In IE, you can use the onPaste event. (MSDN documentation)

In Firefox, Safari, Opera and Chrome you can use the onInput event (Dottoro.com reference). This event fires when the text content of the element is changed through the user interface, including pasting.

score 0 · Answer 5 · answered Feb 03 '10 at 07:59

0

I'd use jQuery and add an event handler for the textarea. When the handler fires, do the count and respond as desired.

answered Feb 03 '10 at 07:59

Art

1,027
1
12
21

1

There is no way - as far as I know - to detect a paste and distinguish it from a normal input. Also there is no way to remove the paste, the best you can do is remove the characters that would make the textarea go over the limit. – Andreas Bonini Feb 03 '10 at 08:00
Keep track of every operation on the text area, keep the previous text cached (for every keyup), if a paste causes it to go over the limit, just used the previously cached version to reset it. No need to distinguish between normal input and a paste in this case. – Art Feb 03 '10 at 08:07

limit how many characters can be pasted in textarea

5 Answers5

Linked