Javascript angularjs：只允许在文本框中键入数字

angularjs中是否有任何功能只允许在文本框中键入数字

此功能正是您所需要的

编辑：

您可以将jquery插件包装到指令中。我在这里创建了一个示例：

HTML:

JS:

---

此代码显示了如何防止输入非数字符号的示例

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;
            });
        }
    };
});

---

以安东的回答为基础--

angular.module（“app”）指令（“onlyDigits”，函数（）
{
返回{
限制：“EA”，
要求：“？ngModel”，
范围：{
allowDecimal:“@”，
allowNegative:“@”，
米努姆：“@”，
maxNum:“@”
},
链接：功能（范围、元素、属性、模型）
{
如果（！ngModel）返回；
ngModel.$parsers.unshift（函数（inputValue）
{
var decimalFound=假；
变量位数=inputValue.split（“”）.filter（函数，i）
{
变量b=（！isNaN（s）和&s！=”）；
如果（！b&&attrs.allowDecimal&&attrs.allowDecimal==“true”）
{
如果（s==”&&decimalFound==false）
{
小数=真；
b=正确；
}
}
如果（！b&&attrs.allowNegative&&attrs.allowNegative==“true”）
{
b=（s='-'&&i==0）；
}
返回b；
}).加入（“”）；
if（attrs.maxNum&&！isNaN（attrs.maxNum）&&parseFloat（数字）>parseFloat（attrs.maxNum））
{
数字=attrs.maxNum；
}
if（attrs.minNum&&！isNaN（attrs.minNum）&&parseFloat（数字）

HTML

//类型：123或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);
      }
    };
 });

---

我只是在指令中使用了ng键来输入

HTML:

你可以查一下

它将输入限制为在键入时仅输入文本框中的数字和小数点

您可以限制小数点前后允许的位数

如果将小数点从文本框中删除，它还会修剪小数点后的数字。例如，如果您先输入123.45，然后删除小数点，它还会删除小数点后的尾随数字，使其为123

---

这是最简单、最快的方法，只允许数字输入

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

---

谢谢

这是适合我的方法。它基于，但允许使用

输入
提交表单，使用
向上
和
向下
箭头增加和减少数字，使用
删除
编辑，
退格
，
左
和
右
，以及使用
选项卡
浏览各个字段。请注意，它适用于正整数，如金额

HTML:

我也有过类似的问题，最后我和这件事发生了联系

ng-change="changeCount()" 

然后：

因此，如果插入了无效的数字，则用户默认为1。
基于djsiz解决方案，包装在指令中。
注意：它不会处理数字，但可以轻松更新

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;
                        });
                    }
                }
            }
        ]);

angular
.模块（“应用程序”）
.指令（“mwInputRestrict”[
函数（）{
返回{
限制：“A”，
链接：函数（范围、元素、属性）{
元素打开（“按键”，功能（事件）{
如果（attrs.mwInputRestrict==“onlynumbers”）{
//只允许输入数字，或按退格键和删除键
return（event.charCode>=48&&event.charCode我的解决方案接受复制和粘贴并保存插入符号的位置。它用于产品成本，因此只允许正十进制值。可以很容易地进行重构，以允许负数或整数

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;
                        }
                    });
                }
            };
        });

放在html页面上：

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

您可以这样做：
对RegExp“/^[0-9]+$/”使用ng模式，这意味着只有整数有效

<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>


该值不是有效的整数
只需使用HTML5即可

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


我在

.directive（'numbersCommaOnly'，function（）{
返回{
要求：'ngModel'，
链接：功能（范围、元素、属性、模型）{
on（'keydown'，函数（事件）{
//允许：退格、删除、制表符、转义、输入和。
var array2=[46,8,9,27,13,110,190]
if（array2.indexOf（event.which）！=-1||
//允许：Ctrl+A
（event.which==65&&event.ctrlKey==true）||
//允许：Ctrl+C
（event.which==67&&event.ctrlKey==true）||
//允许：Ctrl+X
（event.which==88&&event.ctrlKey==true）||
//允许：起始、结束、左、右
（event.which>=35&&event.which此解决方案将只接受数字“.”和“-”

这也限制了文本框中的空格输入。我已经使用该指令实现了同样的功能

请提供以下工作示例的解决方案


HTML:

使用
ng only number
仅允许数字，例如：

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

它简单易懂。
只要复制粘贴此代码，您的问题就会得到解决。对于更多条件，只需更改模式中的值。您的工作就完成了

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



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

$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();
};

ng-change="changeCount()" 

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

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;
                        });
                    }
                }
            }
        ]);

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

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;
                        }
                    });
                }
            };
        });

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

<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>

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

.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();
            }
         });

     }
   };
})

<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>

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();
                }
            });

        }
    };
});

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

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

 <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();
 }

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);
    }
  };
});

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

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

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

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

$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(); }
}

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

onlyNumbers(event) { // the logic here }

<input type="phone" numbers-only >