jquery Copy Paste Number only Validator

Muhammad Hassan Tariq

Rate me:

4.63/5 (6 votes)

10 Jan 2015CPOL1 min read

38.6K

Copy/Paste Numbers only Validator works on Chrome/Firefox/IE > 6.0

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

<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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Muhammad Hassan Tariq

Software Developer

United States

Five+ years of demonstrated work experience in developing and implementing business technology applications, systems integration and testing solutions with in-depth domain knowledge of industries like Healthcare, Telecom, Call Center, Financial Instruments, Payroll, HR, and skills including, but not limited to, software analysis, design and development.

Comprehensive understanding of NET Framework 4.5, 4.0, 2.0 and C#, ASP.Net, ADO.Net, Entity Framework, LINQ, Web Service, WCF, AJAX Control Toolkit, Advanced JavaScript, HTML 5.0, CSS3.0, jQuery, SSIS, SSRS, XML, XSLT, JSON.

Expertise in end to end development of enterprise web application and Single Page Application (SPA) using ASP.NET MVC, ASP.NET Web Forms, ASP.NET Web API, AngularJS, TypeScript, NodeJS, SQL Server and Design Pattern fanatic.