How to prevent user to paste text in textarea after reaching max character limit?

Question

Here I'm using onPaste event :-

$(document).on("paste", ".txtQuestion", function (event e)
    if ( $(".txtQuestion").val().length >= 10) {
        e.preventDefault();
        $(".txtQuestion").addClass("error");
        return false;
    }
    else {
        $(".txtQuestion.error").removeClass("error");
    }
});

`paste` will fire before the value is pasted. That is why it is not working. You need to check after the text has been changed. — Sukanya1991, Apr 13 '15 at 13:46

score 1 · Accepted Answer · edited May 23 '17 at 11:57

You can have a look at this:

$(document).on("paste keydown", ".txtQuestion", function (e) {
    var $this = $(this); //chache your element
    var max = 10; //set max-value for input
    setTimeout(function () { //workaround for catching the pasted input
        var text = $this.val(); //get the value of the textarea
        if (text.length >= max) { //check for the length
            e.preventDefault();
            $this.addClass("error"); 
            $this.val(text.substring(0, max)); //cut the input to the max
        } else {
            $this.removeClass("error");
        }
    }, 100);

});

Demo

See here for the workaround with the setTimeout for catching the pasted input

score 0 · Answer 2 · answered Apr 13 '15 at 13:16

0

Wouldn't it be better to just cut whats over the lenght limit? So on change you'll check lenght and substr(0, limit)?

answered Apr 13 '15 at 13:16

kWeglinski

381
3
14

How to prevent user to paste text in textarea after reaching max character limit?

2 Answers2