Disable copy paste of alphabets in text field using jquery

Question

In my project i have text field that only take numeric value.but when I copy an alphabets using ctl+c and paste using ctl+v it will allow the alphabets in the text field.So

Answer 1

After looking at the event object and "duckduckgoing" a bit:

$('input').on('paste', function (event) {
    if (event.originalEvent.clipboardData.getData('Text').match(/[^\d]/)) {
        event.preventDefault();
    }
});

I've got no idea how cross-browser this is but if backwards compatibility is no issue go ahead and use it.

Check it out at codepen

PS: I'm using google chrome version 22 on mac os 10.6

EDIT: firefox 13 does not have the clipboardData object, ie 10 neither, safari 5.1.2 supports it (so it's a webkit feature).

Answer 2

This functions is for jQuery. It permits only numbers to textboxes The Code:

jQuery.fn.filter = function() {
    $(this).keydown(function (e) {
        if (e.shiftKey || e.ctrlKey || e.altKey) { // if shift, ctrl or alt keys held down
            e.preventDefault();         // Prevent character input
        } else {
            var n = e.keyCode;
            if (!((n == 8)              // backspace
            || (n == 46)                // delete
            || (n >= 35 && n <= 40)     // arrow keys/home/end
            || (n >= 48 && n <= 57)     // numbers on keyboard
            || (n >= 96 && n <= 105))   // number on keypad
            ) {
                e.preventDefault();     // Prevent character input
            }
        }
  $(document).mousedown(function(e){ 
    if( e.button == 2 ) { 
      e.preventDefault();         // Prevent character input
        } else {
            var n = e.keyCode;
            if (!((n == 8)              // backspace
            || (n == 46)                // delete
            || (n >= 35 && n <= 40)     // arrow keys/home/end
            || (n >= 48 && n <= 57)     // numbers on keyboard
            || (n >= 96 && n <= 105))   // number on keypad
            ) {
                e.preventDefault();    
            }
    }
    });
}

Im nt sure about your proper need but try this. sry if its nt wat u want.

Answer 3

The solution provided by jaychapani almost works for this user's specific question. However, it prevents pasting of anything, even numbers.

I slightly modified the code, and now the Javascript (a) allows users to paste numbers but (b) disallows alphabetical and special characters. I removed the following from jaychapani's example above:

            $(".numericOnly").bind("paste",function(e) {  
                 e.preventDefault();  
            });  

The final code would be:

            $(function(){  
            $(".numericOnly").bind('keypress',function(e){  
                      if(e.keyCode == '9' || e.keyCode == '16'){  
                            return;  
                       }  
                       var code;  
                       if (e.keyCode) code = e.keyCode;  
                       else if (e.which) code = e.which;   
                       if(e.which == 46)  
                            return false;  
                       if (code == 8 || code == 46)  
                            return true;  
                       if (code < 48 || code > 57)  
                            return false;  
                 }  
            );  

            $(".numericOnly").bind('mouseenter',function(e){  
                  var val = $(this).val();  
                  if (val!='0'){  
                       val=val.replace(/[^0-9]+/g, "")  
                       $(this).val(val);  
                  }  
            });  
       });  

This works and will reject alphabetical and special characters when pasted either using Ctl+v or from a menu. I've noticed, however, that sometimes there is sometime latency after the user pastes undesired characters before the form reject them.

Usually, rejection of undesired characters happens just a second or two later. But there was a handful of instances where the wait was about 10 seconds before the text was cleared. I'm guessing this is either because (a) I was refreshing to observe behavior and some strange caching behavior was causing the latency for the Javascript to work quickly or (b) some looping issue with the Javascript or (c) some combo of the both.

This'll work OK in most production environments though. I doubt users are refreshing a page over and over before submitting.

However, I wonder if there's a more optimal solution. Suggestions on improving this would be welcomed.

Answer 4

Try this function. This may not be what you are looking for but you can do something out of this. I have done this earlier and posted on my blog.

JS:

 $(function(){  
                $(".numericOnly").bind('keypress',function(e){  
                          if(e.keyCode == '9' || e.keyCode == '16'){  
                                return;  
                           }  
                           var code;  
                           if (e.keyCode) code = e.keyCode;  
                           else if (e.which) code = e.which;   
                           if(e.which == 46)  
                                return false;  
                           if (code == 8 || code == 46)  
                                return true;  
                           if (code < 48 || code > 57)  
                                return false;  
                     }  
                );  
                $(".numericOnly").bind("paste",function(e) {  
                     e.preventDefault();  
                });  
                $(".numericOnly").bind('mouseenter',function(e){  
                      var val = $(this).val();  
                      if (val!='0'){  
                           val=val.replace(/[^0-9]+/g, "")  
                           $(this).val(val);  
                      }  
                });  
           });  

HTML:

 <body>  
       <input type="text" id="textBox" class="numericOnly" />  
 </body>  

This will allow you to enter only numeric values only. You can't even copy paste and drag drop.

DEMO

Code Link

Answer 5

I've updated the answer of jaychapani a bit. Here I've added support for arrow keys. and prevent pressing of % & ( keys.

    $("input").bind('keypress', function (e) {
    if (e.keyCode == '9' || e.keyCode == '16') {
        return;
    }
    var code;
    if (e.keyCode) code = e.keyCode;
    else if (e.which) code = e.which;
    if (e.which == 46)
        return false;
    if (e.which == 33 || e.which == 64 || e.which == 35 || e.which == 36 || e.which == 37 || e.which == 94 || e.which == 38 || e.which == 42 || e.which == 40 || e.which == 41)
        return false;
    if (code == 8 || code == 46)
        return true;
    if (code == 37 || code == 38 || code == 39 || code == 40)
        return true;
    if (code < 48 || code > 57)
        return false;
});


$("input").bind("paste", function (e) {
    e.preventDefault();
});
$("input").bind('mouseenter', function (e) {
    var val = $(this).val();
    if (val != '0') {
        val = val.replace(/[^0-9]+/g, "")
        $(this).val(val);
    }
});

JSFiddle Demo

Thank you.

Answer 6

I have a funny workaround for your problem. For paste event you may use the following code:

$("input").on("paste", function(e) {
    var that = this;
    that.style.color = "#fff";      // field background color
    setTimeout(function() {
        that.value = that.value.replace(/\D/g, "");
        that.style.color = "#000";  // normal field font color
    }, 100);
});​

DEMO: http://jsfiddle.net/dgWDX/