How to limit characters on mouse paste event in javascript

Question

Possible Duplicate:
How do you handle oncut, oncopy, and onpaste in jQuery?

$(document).ready(function() {
    $('#Description').bind('keyup', function() {   
        var characterLimit = 350;
        var charactersUsed = $(this).val().length;
        if (charactersUsed > characterLimit) {
            charactersUsed = characterLimit;
            $(this).val($(this).val().substr(0, characterLimit));
            $(this).scrollTop($(this)[0].scrollHeight);
        }
    });
});

http://jsfiddle.net/qCasN/

This is my code. I am trying to paste some content in description box using mouse right click paste, but it is not handled by the code. I don't know where it goes wrong, can anybody help on fixing this for me.

Thanks in advance

Answer 1

You should use change or input events instead of keyup. If you don't mind little performance loss you could do:

$('#Description').bind('keyup change input', function () { .. });

http://jsfiddle.net/3HdAd/

Answer 2

You'll need to use the mouseup event, instead of the keyup event. keyup is for keyboard actions. I am not sure if the page will receive a mouseup event from a context menu, though. (right-click -> "paste" makes you click a "paste" button on a non-DOM element.

---

Or the events Miszy suggested would be a better choice.

Answer 3

you can use onpaste event to handle this :-

$("#Description").bind("paste", function(){} );

check this link :- How do you handle oncut, oncopy, and onpaste in jQuery?

Answer 4

you can use the default jquery keyup event like below:

var characterLimit = 360; 
$("#Description").keyup(function(){
  if($("#Description").val().length > characterLimit){
    $("#Description").val($("#Description").val().substring(0,characterLimit));
   }
});

or you can use keydown event as

var characterLimit = 360; 
    $("#Description").keydown(function(){
      if($("#Description").val().length > characterLimit){
        return false;
       }
    });