angularjs: allows only numbers to be typed into a text box

This code shows the example how to prevent entering non digit symbols.

angular.module('app'). directive('onlyDigits', function () { return { restrict: 'A', require: '?ngModel', link: function (scope, element, attrs, modelCtrl) { modelCtrl.$parsers.push(function (inputValue) { if (inputValue == undefined) return ''; var transformedInput = inputValue.replace(/[^0-9]/g, ''); if (transformedInput !== inputValue) { modelCtrl.$setViewValue(transformedInput); modelCtrl.$render(); } return transformedInput; }); } }; }); 

HTML

 <input type="text" name="number" only-digits> 

// Just type 123

 .directive('onlyDigits', function () { return { require: 'ngModel', restrict: 'A', link: function (scope, element, attr, ctrl) { function inputValue(val) { if (val) { var digits = val.replace(/[^0-9]/g, ''); if (digits !== val) { ctrl.$setViewValue(digits); ctrl.$render(); } return parseInt(digits,10); } return undefined; } ctrl.$parsers.push(inputValue); } }; }); 

// type: 123 or 123.45

 .directive('onlyDigits', function () { return { require: 'ngModel', restrict: 'A', link: function (scope, element, attr, ctrl) { function inputValue(val) { if (val) { var digits = val.replace(/[^0-9.]/g, ''); if (digits.split('.').length > 2) { digits = digits.substring(0, digits.length - 1); } if (digits !== val) { ctrl.$setViewValue(digits); ctrl.$render(); } return parseFloat(digits); } return undefined; } ctrl.$parsers.push(inputValue); } }; }); 

I just used ng-keypress in the directive for my input.

HTML:

<input type="text" ng-keypress="filterValue($event)"/> 

JS:

$scope.filterValue = function($event){ if(isNaN(String.fromCharCode($event.keyCode))){ $event.preventDefault(); } }; 

This is the simplest and fastest way, for allowing the Number input only.

<input type="text" id="cardno" placeholder="Enter a Number" onkeypress='return event.charCode >= 48 && event.charCode <= 57' required> 

To build on Anton's answer a little --

angular.module("app").directive("onlyDigits", function () { return { restrict: 'EA', require: '?ngModel', scope:{ allowDecimal: '@', allowNegative: '@', minNum: '@', maxNum: '@' }, link: function (scope, element, attrs, ngModel) { if (!ngModel) return; ngModel.$parsers.unshift(function (inputValue) { var decimalFound = false; var digits = inputValue.split('').filter(function (s,i) { var b = (!isNaN(s) && s != ' '); if (!b && attrs.allowDecimal && attrs.allowDecimal == "true") { if (s == "." && decimalFound == false) { decimalFound = true; b = true; } } if (!b && attrs.allowNegative && attrs.allowNegative == "true") { b = (s == '-' && i == 0); } return b; }).join(''); if (attrs.maxNum && !isNaN(attrs.maxNum) && parseFloat(digits) > parseFloat(attrs.maxNum)) { digits = attrs.maxNum; } if (attrs.minNum && !isNaN(attrs.minNum) && parseFloat(digits) < parseFloat(attrs.minNum)) { digits = attrs.minNum; } ngModel.$viewValue = digits; ngModel.$render(); return digits; }); } }; }); 

My solution accept Copy&Paste and save the position of the caret. It's used for cost of products so allows positive decimal values only. Can be refactor very easy to allow negative or just integer digits.

angular .module("client") .directive("onlyNumber", function () { return { restrict: "A", link: function (scope, element, attr) { element.bind('input', function () { var position = this.selectionStart - 1; //remove all but number and . var fixed = this.value.replace(/[^0-9\.]/g, ''); if (fixed.charAt(0) === '.') //can't start with . fixed = fixed.slice(1); var pos = fixed.indexOf(".") + 1; if (pos >= 0) //avoid more than one . fixed = fixed.substr(0, pos) + fixed.slice(pos).replace('.', ''); if (this.value !== fixed) { this.value = fixed; this.selectionStart = position; this.selectionEnd = position; } }); } }; }); 

Put on the html page:

<input type="text" class="form-control" only-number ng-model="vm.cost" /> 

This is the method that works for me. It's based in samnau anwser but allows to submit the form with ENTER, increase and decrease the number with UP and DOWN arrows, edition with DEL,BACKSPACE,LEFT and RIGHT, and navigate trough fields with TAB. Note that it works for positive integers such as an amount.

HTML:

<input ng-keypress="onlyNumbers($event)" min="0" type="number" step="1" ng-pattern="/^[0-9]{1,8}$/" ng-model="... > 

ANGULARJS:

$scope.onlyNumbers = function(event){ var keys={ 'up': 38,'right':39,'down':40,'left':37, 'escape':27,'backspace':8,'tab':9,'enter':13,'del':46, '0':48,'1':49,'2':50,'3':51,'4':52,'5':53,'6':54,'7':55,'8':56,'9':57 }; for(var index in keys) { if (!keys.hasOwnProperty(index)) continue; if (event.charCode==keys[index]||event.keyCode==keys[index]) { return; //default event } } event.preventDefault(); }; 

Based on djsiz solution, wrapped in directive. NOTE: it will not handle digit numbers, but it can be easily updated

angular .module("app") .directive("mwInputRestrict", [ function () { return { restrict: "A", link: function (scope, element, attrs) { element.on("keypress", function (event) { if (attrs.mwInputRestrict === "onlynumbers") { // allow only digits to be entered, or backspace and delete keys to be pressed return (event.charCode >= 48 && event.charCode <= 57) || (event.keyCode === 8 || event.keyCode === 46); } return true; }); } } } ]); 

HTML

 <input type="text" class="form-control" id="inputHeight" name="inputHeight" placeholder="Height" mw-input-restrict="onlynumbers" ng-model="ctbtVm.dto.height"> 

Simply use HTML5

<input type="number" min="0"/> 

You can check https://github.com/rajesh38/ng-only-number

1. It restricts input to only numbers and decimal point in a textbox while typing.
2. You can limit the number of digits to be allowed before and after the decimal point
3. It also trims the digits after the decimal point if the decimal point is removed from the textbox e.g. if you have put 123.45 and then remove the decimal point it will also remove the trailing digits after the decimal point and make it 123.

You could do something like this: Use ng-pattern with the RegExp "/^[0-9]+$/" that means only integer numbers are valid.

<form novalidate name="form"> <input type="text" data-ng-model="age" id="age" name="age" ng-pattern="/^[0-9]+$/"> <span ng-show="form.age.$error.pattern">The value is not a valid integer</span> </form> 

This solution will accept only numeric, '.' and '-'

Also this restricts the space entry on text box. I had used the directive to achieve the same.

Please have the solution on below working example.

http://jsfiddle.net/vfsHX/2697/

HTML:

<form ng-app="myapp" name="myform" novalidate> <div ng-controller="Ctrl"> <input name="number" is-number ng-model="wks.number"> <span ng-show="!wks.validity">Value is invalid</span> </div> 

JS:

var $scope; var app = angular.module('myapp', []); app.controller('Ctrl', function($scope) { $scope.wks = {number: 1, validity: true} }); app.directive('isNumber', function () { return { require: 'ngModel', link: function (scope, element, attrs, ngModel) { element.bind("keydown keypress", function (event) { if(event.which === 32) { event.returnValue = false; return false; } }); scope.$watch(attrs.ngModel, function(newValue,oldValue) { var arr = String(newValue).split(""); if (arr.length === 0) return; if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.' )) return; if (arr.length === 2 && newValue === '-.') return; if (isNaN(newValue)) { //scope.wks.number = oldValue; ngModel.$setViewValue(oldValue); ngModel.$render(); } }); } }; }); 

It's simple and understandable. Just copy paste this code and your issue will get resolved.For more conditions just change the value in pattern.and your work will done.

<input type="text" pattern="[0-9]{0,}" oninvalid="this.setCustomValidity('Please enter only numeric value. Special character are not allowed.')" oninput="setCustomValidity('')"> 

This answer serves as a simplification and optimisation over Leopoldo's answer.

Trigger a function from your input on every keydown like this:

<input type="text" ng-keydown="onlyNumbers($event);"/> 

You can describe the function in this manner in your controller

$scope.onlyNumbers = function(event){ // 'up': 38,'right':39,'down':40,'left':37, // 'escape':27,'backspace':8,'tab':9,'enter':13,'del':46, // '0':48,'1':49,'2':50,'3':51,'4':52,'5':53,'6':54,'7':55,'8':56,'9':57 var keys = { 38:true,39:true,40:true,37:true,27:true,8:true,9:true,13:true, 46:true,48:true,49:true, 50:true,51:true,52:true,53:true, 54:true,55:true,56:true,57:true }; // if the pressed key is not listed, do not perform any action if(!keys[event.keyCode]) { event.preventDefault(); } } 

In case you're using Angular 2+, you can call this same function in this manner:

<input type="text" (keydown)="onlyNumbers($event);"/> 

Your Angular 2+ function should look something like this:

onlyNumbers(event) { // the logic here } 

<input type="phone" numbers-only > 

You can use this way if you want only numbers :)

here is the the demo click

I had a similar issue and ended up hooking and event

ng-change="changeCount()" 

then:

self.changeCount = function () { if (!self.info.itemcount) { self.info.itemcount = 1; } }; 

So the user is defaulted to 1 if a invalid number is inserted.

I arraged the jQuery in this

.directive('numbersCommaOnly', function(){ return { require: 'ngModel', link: function (scope, element, attrs, ngModel) { element.on('keydown', function(event) { // Allow: backspace, delete, tab, escape, enter and . var array2 = [46, 8, 9, 27, 13, 110, 190] if (array2.indexOf(event.which) !== -1 || // Allow: Ctrl+A (event.which == 65 && event.ctrlKey === true) || // Allow: Ctrl+C (event.which == 67 && event.ctrlKey === true) || // Allow: Ctrl+X (event.which == 88 && event.ctrlKey === true) || // Allow: home, end, left, right (event.which >= 35 && event.which <= 39)) { // let it happen, don't do anything return; } // Ensure that it is a number and stop the keypress if ((event.shiftKey || (event.which < 48 || event.which > 57)) && (event.which < 96 || event.which > 105)) { event.preventDefault(); } }); } }; }) 

 <input type="text" ng-keypress="checkNumeric($event)"/> //inside controller $scope.dot = false $scope.checkNumeric = function($event){ if(String.fromCharCode($event.keyCode) == "." && !$scope.dot){ $scope.dot = true } else if( isNaN(String.fromCharCode($event.keyCode))){ $event.preventDefault(); } 

I know this is an old post but this adaptation of My Mai's answer works nicely for me...

angular.module("app").directive("numbersOnly", function() { return { require: "ngModel", restrict: "A", link: function(scope, element, attr, ctrl) { function inputValue(val) { if (val) { //transform val to a string so replace works var myVal = val.toString(); //replace any non numeric characters with nothing var digits = myVal.replace(/\D/g, ""); //if anything needs replacing - do it! if (digits !== myVal) { ctrl.$setViewValue(digits); ctrl.$render(); } return parseFloat(digits); } return undefined; } ctrl.$parsers.push(inputValue); } }; }); 

I have done at

.js

$scope.numberOnly="(^[0-9]+$)"; 

.html

<input type="text" name="rollNo" ng-model="stud.rollNo" ng-pattern="numberOnly" ng-maxlength="10" maxlength="10" md-maxlength="10" ng-required="true" > 

Use ng-only-number to allow only numbers, for example:

<input type="text" ng-only-number data-max-length=5> 

 <input onkeypress="return (event.charCode >= 48 && event.charCode <= 57) || event.charCode == 0 || event.charCode == 46">