jquery Copy Paste Number only Validator

Standard

Introduction

You might have witnessed at some places where numbers are allowed, paste feature doesn’t work either in Internet Explorer or in Chrome/Firefox AND in some particular scenarios, paste feature worked fine in Internet Explorer/Chrome but not in Firefox AND paste alphabets along numbers too in numbers only text field . After coding/debugging/testing, finally come up with below written code that totally runs smoothly even on Internet Explorer > 6.0.

Background

During development, I always encountered a scenario where we have to allow number only as input in text fields[sounds like child play!! right?], since validation plugin is provide by jQuery, you can always include such plugins in your page in order to achieve validation feature for input fields. So coming back to the point, always remember KISS principle [Keep It Simple Stupid – Google it!!!], it states that systems run smoothly when they are less complex, since we can achieve validation feature from native JavaScript/jQuery then there seems no reason to include extra validation plugin in your page for couple of fields and increase page load time [unless you tweak plugin library a lot – which totally depends upon the time].

Using the Code

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

<html>
  <head>
  <title>jQuery Validator By Hassan Tariq</title>
  <script src="https://code.jquery.com/jquery-1.11.2.min.js" 
  type="text/javascript"></script>
  <script type="text/javascript">
  
  $(document).ready(function () {
      var keyDown = false, ctrl = 17, vKey = 86, Vkey = 118; 
  
      $(document).keydown(function (e) {
          if (e.keyCode == ctrl) keyDown = true;
      }).keyup(function (e) {
          if (e.keyCode == ctrl) keyDown = false;
      });
  
      $('input[type=text]').on('keypress', function (e) {
          if (!e) var e = window.event;
          if (e.keyCode > 0 && e.which == 0) return true;
          if (e.keyCode)    code = e.keyCode;
          else if (e.which) code = e.which;
          var character = String.fromCharCode(code);
          if (character == '\b' || character == ' ' || character == '\t') return true;
          if (keyDown && (code == vKey || code == Vkey)) return (character);
          else return (/[0-9]$/.test(character));
      }).on('focusout', function (e) {
          var $this = $(this);
          $this.val($this.val().replace(/[^0-9]/g, ''));
      }).on('paste', function (e) {
          var $this = $(this);
          setTimeout(function () {
              $this.val($this.val().replace(/[^0-9]/g, ''));
          }, 5);
      });
  });
  
  </script>       
  </head>
  <body>
    <input type="text" />
    <br/><br/>
    <input type="text" />
  <body>
</html>

Points of Interest

This snippets have been tested on Chrome/Firefox/Safari/Internet Explorer > 6.0, value in setTimeout function can be changes as per need along with regex expression.

History

  • Version 1.0

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

 

About the Author

Muhammad Hassan Tariq

Software Developer TRG/IBEX-Global
Pakistan Pakistan
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s