limit how many characters can be pasted in textare

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.

Answer 1

$("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.

Answer 2

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.

Answer 3

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

1. Don't allow the user to paste content (This would a really bad idea for UX).
2. Use an onPaste event in order to substr the pasted content from 0 to the limit of characters, once it is pasted.
3. Use a javascript/flash plugin (This will not work on mobile devices).
4. 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.

Answer 4

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.

Answer 5

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