只允許在輸入字段中輸入數值

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

$parsers ：

<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;
        }
      });
    }
  };
}]);

演示小提琴

Answer 2

下面是一個簡單的指令，它僅允許您在輸入字段內輸入數字。

鏈接到輸入字段時：

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

它在輸入字段上綁定一個keydown事件，該事件檢查已按下的鍵。 鍵盤上的每個鍵都有一個全局編號。 例如： enter分配了數字13 。

關鍵代碼的完整列表

當您按下鍵盤上的某個鍵時，它與var keyCode列出的鍵代碼匹配

var keyCode = [8, 9, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 110];

那么我們阻止該動作執行。

 (function () { angular.module("app", []) .directive("validNumber", function () { return { restrict: "EA", require: "?ngModel", link: function (scope, element, attrs, ngModel) { if (!ngModel) return; var keyCode = [8, 9, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 110]; element.bind("keydown", function (event) { if ($.inArray(event.which, keyCode) === -1) { scope.$apply(function () { scope.$eval(attrs.validNumber); event.preventDefault(); }); event.preventDefault(); } }); } }; }); })(); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div ng-app="app"> <input type="text" ng-model="test" valid-number="" name="test"> </div> 

---

UPDATE

---

根據您對其他張貼遮陽篷的評論。 您可以只使用.replace()函數替換數字以外的所有內容。

即使您復制並粘貼帶有無效字符的有效數字，它也會替換無效字符。

我允許用戶寫一個點. ，因為5.2是有效數字。 但是，如果您不希望這樣做，可以將regex替換為

value.replace(/[^0-9]/g, "");

DEMO

 (function () { angular.module("app", []) .directive("validNumber", function () { return { restrict: "EA", require: "?ngModel", link: function (scope, element, attrs, ngModel) { if (!ngModel) return; element.bind("keypress keyup", function (event) { var value = element.val(); value = value.replace(/[^0-9.]/g, ""); element.val(value); }); } }; }); })(); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div ng-app="app"> <input type="text" ng-model="test" valid-number="" name="test"> </div> 

Answer 3

這可能會有所幫助

 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; /* some part are still there even though it is hidden */ } 

 <div ng-app="app"> <input type="number" > </div> 

如果您對鍵“ e”不滿意，請使用以下命令

 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.myFunc = function (event) { if (event.keyCode < 48 || event.keyCode > 57) { event.preventDefault(); } }; }); 

 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; /* some part are still there even though it is hidden */ } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <input type="text" ng-keypress="myFunc($event)"> </div> 

Answer 4

您是否嘗試將輸入類型設置為數字 ？

<input type="number" />

即使用戶將使用粘貼，這也會自動剝離所有字母字符