Question

我的Firefox指令有一个奇怪的问题。我的指令仅仅是限制用户输入，它可以像Chrome一样在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">

Answer 1

我相信你应该使用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/

您还可以使用输入控件上的最小和最大属性来限制数字范围...但是用户仍然可以复制＆amp;粘贴以使输入处于您不想要的状态。

我可能会建议不要使用这种方法，而是使用类似验证的方法，警告用户输入无效的内容，而不是过于努力地阻止它们。

Firefox

1 个答案: