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
