使用angularjs禁用箭头键输入数字

时间:2014-11-02 04:27:28

标签: angularjs angularjs-directive spinner

我想通过angularjs指令(或其他方式)禁用数字输入的向上和向下键 注意:我不想将输入类型更改为文本,因为我被要求不这样做。 我也已经拆掉了纺纱机。 我是棱角分明的人,所以不太了解它。我搜索了我能找到的所有链接,但他们主要是关于隐藏旋转器而不是禁用箭头键。 我从其他链接获得此代码。这会禁用鼠标滚轮。如果可以对此进行一些更改,那就太棒了。

module.directive('input',function() {
return {
    restrict: 'E',
    scope: {
        type: '@'
    },
    link : function (scope, $element) {
        if (scope.type == 'number') {
            $element.on('focus', function () {
                angular.element(this).on('keyup', function (e) {
                    e.preventDefault();
                });
            });
            $element.on('blur', function () {

                angular.element(this).off('keyup');
            });
        }
    }
}
});

2 个答案:

答案 0 :(得分:5)

如果要为所有输入[数字]元素全局禁用向上/向下箭头键:

$(document).bind('keydown', function(event) {
  var target = event.srcElement || event.target;
  var tag = target.tagName.toUpperCase();
  var type = target.type.toUpperCase();
  if (tag === 'INPUT' && type === 'NUMBER' && 
     (event.keyCode === 38 || event.keyCode === 40)) {
    event.preventDefault();
  }
});

或者您可以使用指令将其绑定到单个元素:

.directive('disableArrows', function() {

  function disableArrows(event) {
    if (event.keyCode === 38 || event.keyCode === 40) {
      event.preventDefault();
    }
  }

  return {
    link: function(scope, element, attrs) {
      element.on('keydown', disableArrows);
    }
  };  
});

模板:

 <input type="number" disable-arrows />

答案 1 :(得分:1)

您可以将指令更改为:

module.directive('input',function() {
return {
    restrict: 'E',
    scope: {
        type: '@'
    },
    link : function (scope, $element) {
        if (scope.type == 'number') {
            $element.on('focus', function () {
                angular.element(this).on('keyup', function (e) {
                    if (event.keyCode === 38 || event.keyCode === 40) {
                       e.preventDefault();
                    }
                });
            });
            $element.on('blur', function () {

                angular.element(this).off('keyup');
            });
        }
    }
}
});