指令限制输入不适用于type = number

Question

我有一个自定义指令，该指令将输入限制为特定的符号，在我的情况下，只能输入数字。 它是在输入中对ng-model进行过滤之后制作的，并且在text-type inpit中可以正常工作。

指令声明为

     .directive('onlydigitinput', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, modelCtrl) {
            modelCtrl.$parsers.push(function (inputValue) {
                var transformedInput = inputValue.toLowerCase().replace(/ /g, '').replace(/[^0-9]+/g, '');
                if (transformedInput != inputValue) {
                    modelCtrl.$setViewValue(transformedInput);
                    modelCtrl.$render();
                }
                return transformedInput;
            });
        }
    };
})

但是在数字输入的情况下，我想使用输入type = number，而不是type = text：

<input type="number"  
onlydigitinput="onlydigitinput" required="required" min="1" max="99" maxlength="2">

然后是一个问题：我具有基于min-max属性的正确验证，但是我仍然可以输入所有符号，例如字母，并且指令无法正常工作。 此外，maxlength似乎没有作用。 我如何才能修正我的指令以与type =“ number”输入一起使用？

Answer 1

这里有两个问题。 首先， maxlength属性不适用于输入类型number 。 请参阅例如Chrome中输入类型=“数字”的maxlength被忽略 。

其次，当输入类型为number ，指令的函数仅在输入数值为number时才获得inputValue参数的值。 请参阅此小提琴作为示例（控制台输出可能更清楚）。

编辑：

使用数字类型输入对您有多重要？ 如果没有必要将浏览器添加到输入框的微调控件，则我可能会选择自定义类型，如此处所述： 如何创建自定义输入类型？

我已经使用了非常类似的东西，例如货币输入字段（带有本地化的小数点分隔符等）。