Angular在Firefox上的指令

Angular directive on Firefox

本文关键字：指令 Firefox Angular      更新时间：2023-09-26

我在Firefox上有一个奇怪的问题。我的指令只是为了限制用户输入，它在Chrome上的工作，因为它应该是。但是在Firefox上，当用户输入的数字达到极限时，你就不能再删除这个数字了。退格键以某种方式锁定，或者任何键都不起作用。例如:当用户试图输入超过999的数字时，键盘会被锁定，但你仍然可以在chrome上删除这个数字。但在Firefox中，你不能删除，也不能按任何数字。有什么想法吗?

.directive("limitTo", [function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);
            angular.element(elem).on("keypress", function() {
                if (this.value.length == limit){
                    return false;
                }
            });
        }
    };
}]);

元素:

 input limit-to="3" type="number" name="performance" class="typo-xl-l input-power">

我认为您应该使用event. preventdefault()而不是简单地在事件处理程序中返回false。您还可以检查特定的键代码(例如，退格为8);

.directive("limitTo", [function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);
            //backspace, up arrow, down arrow, delete... gets complicated quickly. 
            // you'll probably want more than these
            var allowedKeys = [8, 38, 40, 46];
            angular.element(elem).on("keypress", function(event) {
                var key = event.which || event.keyCode;
                if (this.value.length === limit && allowedKeys.indexOf(key) < 0 ){
                    event.preventDefault();
                }
            });
        }
    };
  }]);

小提琴@ http://jsfiddle.net/o6gcyLjk/18/

你还可以在输入控件上使用min和max属性来限制数字范围…但是用户仍然可以复制&粘贴以使输入处于您不想要的状态。

一般来说，我可能不建议使用这种方法，而是使用类似验证的方法，警告用户无效的输入，而不是试图阻止它们。
相关文章：