无法仅设置数字输入[重复]

Question

我正在尝试设置一个只能接受数字的输入，但仍然可以在其中输入字母，为什么？

               <input type="number"
                      pattern="[0-9]"
                      ng-model="slip.risk"
                      class="form-control"
                      placeholder="Risk"
                      ng-change="riskWinCalculations(slip, 'RISK')">

这是一个 Angularjs 应用程序，所以我不知道这是问题还是什么。

Answer 1

pattern 不会阻止字符被输入到输入元素中，它只会触发验证。

为了防止输入非数字字符，您可以使用截取输入值的指令。

angular.module('components', []).directive('numbersOnly', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            ngModelCtrl.$parsers.push(function (inputValue) {
                var transformedInput = inputValue.replace(/\.\.+/g, '.');
                ngModelCtrl.$setViewValue(transformedInput);
                ngModelCtrl.$render();

                return inputValue;
            });
        }
    }
});

Here's a JsFiddle of the working directive