Javascript 限制输入的指令不能与type=number一起使用

我有一个自定义指令，它将输入限制为特定的符号，在我的例子中，仅限于数字。它是在之后制作的，在文本类型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">

---

然后就是一个问题：我有基于minmax属性的正确验证，但我仍然可以输入所有符号，比如字母，并且指令不能正常工作。此外，maxlength似乎没有效果。如何修复指令以使用type=“number”输入？

这里有两个问题。首先，

maxlength

属性不适用于输入类型

number

。见例。

其次，当输入类型为

number

时，指令的函数仅在

inputValue

参数为数字时获取其值。请参见示例（控制台输出可能会更清楚）

编辑：

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

---

我对货币输入字段（带有本地化的十进制分隔符等）使用了非常类似的方法。

该指令只删除空格，并使所有内容都小写，但并不阻止输入非数字字符。@Quad，还有一个表达式：。replace（/[^0-9]+/g'）；哎呀，我没看见。但正如MJV所说，这可能是因为你得到的数字是

inputValue

，而不是字符串。是的，如果是这样，我可能必须创建一个特殊的类型。事实上，input=text与min和max属性配合得很好，可以正确地验证字段。是的，如果你有一堆字段，它们代表一些特殊的东西，该自定义类型也可以很好地表达这一点。（例如，在本例中，我考虑了百分比值，范围从1到99，然后

将有利于可读性。）您可以在下面的答案中找到解决问题的方法