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

Question

我有一个自定义指令，将输入限制为特定符号，在我的例子中，只有数字。它是在filters on ng-model in an input 之后制作的，在文本类型的 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;
            });
        }
    };
})

但在数字输入的情况下，我想使用输入类型=数字，而不是类型=文本：

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

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

Answer 1

这里有两个问题。首先，maxlength 属性不适用于输入类型number。参见例如 maxlength ignored for input type=“number” in Chrome.

其次，当输入类型为number 时，你的指令函数只有在inputValue 参数为数字时才会获取它的值。以this fiddle 为例（控制台输出可能会更清楚）。

编辑：

使用数字类型输入对您来说有多重要？如果浏览器添加到输入字段的微调器控件不是必需的，我可能会选择如下所述的自定义类型：How to create a custom input type?

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