Question

在我们正在构建的Web应用程序中，我们遇到了一些只在Internet Explorer中发生的奇怪错误。

在plunker中看到的输入验证在所有浏览器中都能正常工作，除了在IE中（我们必须支持IE10 +）。我们在输入中使用type="number"期望数字，因为它使得在大多数浏览器中如此容易确保用户只输入允许的字符。我们还使用ng-pattern="/^\d+$/"来增加对允许的数字类型的更多验证，而且它是IE中唯一的验证，因为不支持输入类型。

问题是：输入验证几乎按预期工作，除非我们输入字母作为输入的第一个字符（＆＃34; abb45＆＃34;例如）。它甚至不认为它是无效的输入！我在另一个SO线程中看到，将required放在输入上会正确触发验证，但在我们的例子中，这个特定字段根本不是强制性的。另外，即使该字段被标记为无效，也不会显示验证消息（我不确定在该情况下验证错误的来源）。

删除type="number"是一种解决方法（它确实解决了IE中的问题），但我们宁愿在进行此更改之前尝试找到另一种解决方案，这会破坏“平滑”＃34;其他浏览器中的数字输入。

注意：我们不使用jQuery（只有jQuery lite，因为angular将它作为依赖项）。

Answer 1

是的IE有类型=＆＃34;数字＆＃34; 。我鼓励你也使用指令只接受数字

angular.module('moduleName').directive('numbersOnly', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attr, ngModelCtrl) {
            function fromUser(text) {
                if (text) {
                    var transformedInput = text.replace(/[^-0-9\.]/g, '');

                    if (transformedInput !== text) {
                        ngModelCtrl.$setViewValue(transformedInput);
                        ngModelCtrl.$render();
                    }
                    return transformedInput;
                }
                return undefined;
            }            
            ngModelCtrl.$parsers.push(fromUser);
        }
    };
});

，在html中将number-only属性添加到

Ex: <input number-only />

Internet Explorer，ng-pattern和输入类型＆＃34; number＆＃34;在表单验证中

1 个答案: