Post
Ask Question

jQuery Copy Paste Number Only Validator

You might have witnessed at in places where numbers are allowed, the paste feature doesn't work either in Internet Explorer or in Chrome/Firefox and in some specific scenarios, the paste feature works fine in Internet Explorer/Chrome but not in Firefox and it pastes letters along with numbers in text fields that are for numbers only. After coding/debugging/testing, I finally developed the following code that totally runs smoothly even on Internet Explorer > 6.0.

During development, I always encountered a scenario where we must allow only numbers as input in text fields (sounds like child's play, right?). Since the validation of a plugin is provide by jQuery, you can always include such plugins in your page to get a validation feature for input fields. So getting to the point, always remember the KISS principle (Keep It Simple Stupid; Google it!). It states that systems run smoothly when they are less complex, since we can get the validation feature from native JavaScript/jQuery then there seems no reason to include an extra validation plugin in your page for a couple of fields and increase the page load time (unless you tweak the plugin library very much, that totally depends upon the time).

So this function will check the input value on keypress or when you move the focus to another field or when you press Ctrl + v in the target input area, you just need to place the code in:

  1. <html>  
  2. <head>  
  3.     <title>jQuery Validator By Hassan Tariq</title>  
  4.     <script src="https://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>  
  5.     <script type="text/javascript">  
  6.   
  7.         $(document).ready(function () {  
  8.             var keyDown = false, ctrl = 17, vKey = 86, Vkey = 118;  
  9.   
  10.             $(document).keydown(function (e) {  
  11.                 if (e.keyCode == ctrl) keyDown = true;  
  12.             }).keyup(function (e) {  
  13.                 if (e.keyCode == ctrl) keyDown = false;  
  14.             });  
  15.   
  16.             $('input[type=text]').on('keypress', function (e) {  
  17.                 if (!e) var e = window.event;  
  18.                 if (e.keyCode > 0 && e.which == 0) return true;  
  19.                 if (e.keyCode) code = e.keyCode;  
  20.                 else if (e.which) code = e.which;  
  21.                 var character = String.fromCharCode(code);  
  22.                 if (character == '\b' || character == ' ' || character == '\t') return true;  
  23.                 if (keyDown && (code == vKey || code == Vkey)) return (character);  
  24.                 else return (/[0-9]$/.test(character));  
  25.             }).on('focusout', function (e) {  
  26.                 var $this = $(this);  
  27.                 $this.val($this.val().replace(/[^0-9]/g, ''));  
  28.             }).on('paste', function (e) {  
  29.                 var $this = $(this);  
  30.                 setTimeout(function () {  
  31.                     $this.val($this.val().replace(/[^0-9]/g, ''));  
  32.                 }, 5);  
  33.             });  
  34.         });  
  35.     </script>  
  36. </head>  
  37. <body>  
  38.     <input type="text" id="textBoxid1" />  
  39.     <br /><br />  
  40.     <input type="text" id="textBoxid2" />  
  41.     <body>  
  42. </html>  
This snippet has been tested on Chrome/Firefox/Safari/Internet Explorer > 6.0. The value in the setTimeout function can be changed as needed along with the regex expression.

The code is available @ https://github.com/m-hassan-tariq/jquery-NumberValidationOnCopyPaste

 


Similar Articles