/*Created by AlexCD on 22.04.2014*/
var app = angular.module('plunker', []);
app.directive('inputOnlyNumbers', function() {
"use strict";
return {
require: 'ngModel',
scope: {
model: '=',
min: '=',
max: '='
},
link: function (scope, element, attrs, ngModel) {
function setValidity(boolean) {
ngModel.$setValidity('rangeError', boolean);
}
function checkRangeValidity(newVal) {
var checkResult = true;
if (scope.max && newVal > scope.max) {
checkResult = false;
}
if (scope.min && newVal < scope.min) {
checkResult = false;
}
setValidity(checkResult);
}
//keep only numbers and change numbered value to integer, to avoid typing like 00, 01 and so on
function filterValue(text) {
var regex, filteredText;
regex = new RegExp(/^0+(?!$)|[^\d]/g);
if (text && text.match(regex)) {
filteredText = text.replace(regex, '');
ngModel.$setViewValue(filteredText);
ngModel.$render();
} else {
filteredText = text;
}
checkRangeValidity(filteredText);
return filteredText;
}
ngModel.$parsers.push(filterValue);
}
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta name="description" content="AngularJS directive to keep only digits when typing in input fields">
<meta name="keywords" content="AngularJS, directive, input, numbers">
<meta name="author" content="Alexandru Costin Dumitru (AlexCD)">
<meta charset="utf-8" />
<title>AngularJS Input Only Numbers</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script>
<script src="app.js"></script>
</head>
<body>
<form name="theForm">
<div>Min: 10</div>
<input type="text" ng-model="model" min="10" max="100" input-only-numbers />
<div>Max: 100</div>
</form>
<div id="errorMsg">
<span ng-show="theForm.$error.rangeError">Invalid range</span>
<div ng-show="!theForm.$error.rangeError">Valid range</div>
</div>
</body>
</html>
form{
display: block;
border: 1px solid #dcdcdc;
overflow: hidden;
padding: 0.5em;
}
form div{
display: inline-block;
}
form input{
display: inline-block;
}
#errorMsg{
display: block;
border: 1px solid #dcdcdc;
border-top: 0;
padding: 0.5em;
}
input-only-numbers
========================
AngularJS directive that replaces any other character except digits. Can be used on type type text, number, tel input fields. Number and tel input fields will open the corresponding keyboard on mobile devices. But on some devices, these keyboards still contains some characters like dots or commas, so this directive forbids the user inputting anything else than digits.
Dependencies
============
To use this directive in your projects, you must include its dependencies. Asumming you already have angular and jquery libraries included in your project, you're going to need the main directive file: InputOnlyNumbers.js
Usage
=====
Once you've checked that everything is in place, you can use this directive like so:
```html
<input type="text" ng-model="model" min="10" max="100" input-only-numbers />
```
or
```html
<input type="number" ng-model="model" min="10" max="100" input-only-numbers />
```