javascript - 只允许在输入字段中输入数值

Question

我写了下面的指令，它只允许在输入字段中输入数字值。除了允许输入字母数字外，同样可以正常工作，例如，如果我复制了“abc123”并将其粘贴到输入字段中然后它接受数字并忽略不应该是这种情况的字母表。在这种情况下，它不应允许在输入字段中粘贴任何内容。请帮忙。

function link(scope, element, attrs, modelCtrl){
        modelCtrl.$parsers.push(function(inputValue) {
            if (inputValue === undefined) return '';

            var cleanInputValue = inputValue.replace('.', '')
                .replace(/[^0-9.]/g, '')
                .replace(/\./, "x")
                .replace(/\./g, "")
                .replace(/x/, ".");
            if (cleanInputValue != inputValue) {
                modelCtrl.$setViewValue(cleanInputValue);
                modelCtrl.$render();
            }
            return cleanInputValue;
        })
    }

Answer 1

$解析器:

<input type="text" ng-model="test" format="number" />

JS

app.directive('format', ['$filter', '$window', function($filter, $window) {
  return {
    require: '?ngModel',
    link: function(scope, elem, attrs, ctrl) {
      if (!ctrl) return;

      scope.vKey = 86;
      scope.ctrlVDown = false;
      angular.element($window).bind("keydown", function($event) {
        console.log($event.keyCode);
        if ($event.keyCode == scope.vKey) {
          scope.ctrlVDown = true;
        } else {
          scope.ctrlVDown = false;
        }
      });


      ctrl.$parsers.unshift(function(viewValue) {
        var plainNumber = viewValue.replace(/[^\d|\-+|\.+]/g, '');

        console.log(scope.ctrlVDown);

        if (scope.ctrlVDown && plainNumber.length !== viewValue.length) {
          elem.val('');
          return '';
        } else {
          elem.val(plainNumber);
          return plainNumber;
        }
      });
    }
  };
}]);

Demo Fiddle