Question

we have a textarea and it should allow only 300 char’s. we are able to control it via any keyboard press event using

onkeydown="limitText(this,300);" 
onkeyup="limitText(this,300);

where limitText is as follows

limitText = function (limitField, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    }
},

But we are unable to control mouseClick paste via this….Please share any idea on this.
Please Note: i checked few solutions on internet but couldnt solve. i know its a small issue, but as am new to jQuery (infact to the whole web world), am unable to ping at the right place…..

Answer 1

To handle all input modern browsers have oninput event

Here the sample that do what you asked using this event:

$('.limited').bind('input',function() {
    var $t=$(this);
    var max=$t.data('maxchars');
if ($t.val().length>max) {
    $t.val($t.val().substr(0,max));
}
});​

DEMO

for old browsers you should use keyup,keydown+onpaste:

$('.limited').bind('keyup keydown paste',function(e) {
    var $t=$(this);
    setTimeout(function(){ 
    var max=$t.data('maxchars');
if ($t.val().length>max) {
    $t.val($t.val().substr(0,max));
}
    },0);
});​

OLD BROWSERS DEMO