Before reading this text there is only one prerequisite condition; you must know how to create a directive in AngularJs and why we need to create them. First of all you need to add AngularJs and jQuery to your page, similar to here:
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
<script src="jquery-1.11.1.min.js"></script>
</head>
You will either download them from my code that is available at the start of this article or you can download from their official websites. Now i'm simply adding a textbox wherever i would like to allow only numbers using an AngularJs directive.
<body>
<form ng-app="app" id="form1" runat="server">
<div>
<h3> Demo to Allow Numbers Only </h3>
<hr />
Provide Your Mobile Number: <input type="text"
name="MobileNumber"
class="form-control"
allow-only-numbers />
<hr />
</div>
</form>
</body>
Now it's time for Angular code. Write the following code:
<script>
var app = angular.module('app', []);
app.directive('allowOnlyNumbers', function () {
return {
restrict: 'A',
link: function (scope, elm, attrs, ctrl) {
elm.on('keydown', function (event) {
if (event.which == 64 || event.which == 16) {
// to allow numbers
return false;
} else if (event.which >= 48 && event.which <= 57) {
// to allow numbers
return true;
} else if (event.which >= 96 && event.which <= 105) {
// to allow numpad number
return true;
} else if ([8, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) {
// to allow backspace, enter, escape, arrows
return true;
} else {
event.preventDefault();
// to stop others
return false;
}
});
}
}
});
</script>
Here I first created a module named "app". The module creation is a necessary part if you wish to use Angular. This module is added to the HTML page using the ng-app directive. Then I created the directive with the name "allowOnlyNumbers". If you're making any kind of directive using AngularJs then you need to continually check that the name is provided using "-" in your HTML page and these dashes "-" are replaced by capital letters in the Angular code. Since I had applied this directive to the attribute of the textbox I had restricted this directive using "A" for Attribute.
I had applied this directive on the keydown event of the textbox. After those varied conditions are applied to the ASCII values of the keys to permit or to prevent them. In any case our ASCII values aren't allowed. event.preventDefault() will take away that character and can revert to the previous value. But still I had the intense problem of all the characters that were entered by pressing the shift + key weren't removed by this code, therefore I used easy jQuery at the beginning of the code to help prevent this situation.
var $input = $(this);
var value = $input.val();
value = value.replace(/[^0-9]/g, '')
$input.val(value);
Then, write the following code:
app.directive('allowOnlyNumbers', function () {
return {
restrict: 'A',
link: function (scope, elm, attrs, ctrl) {
elm.on('keydown', function (event) {
var $input = $(this);
var value = $input.val();
value = value.replace(/[^0-9]/g, '')
$input.val(value);
if (event.which == 64 || event.which == 16) {
// to allow numbers
return false;
} else if (event.which >= 48 && event.which <= 57) {
// to allow numbers
return true;
} else if (event.which >= 96 && event.which <= 105) {
// to allow numpad number
return true;
} else if ([8, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) {
// to allow backspace, enter, escape, arrows
return true;
} else {
event.preventDefault();
// to stop others
//alert("Sorry Only Numbers Allowed");
return false;
}
});
}
}
});
Output:
Now our application is made and we will check the output. On running the application an easy textbox are going to be shown wherever only numbers are allowed.
If you press the numbers from anywhere within the key, they will be allowed however all the other characters won't be allowed to exist, although they're special characters.
HostForLIFE.eu AngularJS Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes.
