AngularJS問題只允許將數字輸入到文本框中

我希望用戶只允許將數字輸入到文本框中。對於這個我使用下面的代碼：下面AngularJS問題只允許將數字輸入到文本框中

.directive('digitOnly', [function() { 
    return { 
     require: 'ngModel', 
     scope: { 
      digitOnly: '=?' 
     }, 
     link: function (scope, element, attrs, modelCtrl) { 
      if (scope.digitOnly || scope.digitOnly == undefined) { 
       modelCtrl.$parsers.push(function (inputValue) { 
        if (inputValue == undefined) return ''; 
        if (attrs.digitOnly == "false") { 
         return inputValue; 
        } else { 
         var transformedInput = inputValue.replace(/[^0-9]/g, ''); 
         if (transformedInput != inputValue) { 
          modelCtrl.$setViewValue(transformedInput); 
          modelCtrl.$render(); 
         } 
         return transformedInput; 
        } 
       }); 
      } 
     } 
    }; 
}])

我輸入文本框代碼給出：

<input type="text" name="sidNo" class="form-input" placeholder="Enter 5-6 digits" 
ng-minlength="5" maxlength="6" ng-model="profInfo.sidNo" required digit-only 
ng-pattern="/^[0-9]*$/">

當我輸入什麼它是工作的罰款。它限制我輸入數字除外。

但問題是，當我的ng模型值profInfo.sidNo來自後端像AASS001那樣顯示我在文本框上的無效輸入錯誤消息是正確的，但是當我從退格按鈕中刪除此值時，刪除所有值在單鍵退格鍵和輸入兩個零像00

所以請幫我解決這個問題。

我正在使用AngularJS。

來源

2017-02-17 user3441151

你到底要什麼固定的嗎？輸入做它所需要的，它刪除所有無效的字符。你在問如何讓無效字符留下來，完全擊敗了指令的目的？ –

@GiovaniVercauteren我想要清空文本框的值，如果有任何無效的字符只有當我複製粘貼一些字母數字文本時纔會發現。 – user3441151

首先，@ giovani-vercauteren是正確的，如果你允許無效字符，那麼沒有使用角度指令的要點。
但下面的黑客可以滿足您的要求。我希望

var thisApp = angular.module('thisApp',[]); 

//myApp.directive('myDirective', function() {}); 
//myApp.factory('myService', function() {}); 

thisApp.controller('MyCtrl',['$scope', function($scope) { 
    $scope.btnClick= function(){ 
    $scope.sidNo='7AASS001'; 
    } 
}] 
); 

thisApp.directive('digitOnly', [function() { 
    return { 
     require: 'ngModel', 
     scope: { 
      digitOnly: '=?' 
     }, 
     link: function (scope, element, attrs, modelCtrl) { 
     scope.isBackspacePressed=false; 
     element.bind('keydown', function (e, inputs) { 

      var code = e.keyCode || e.which; 
      var val = element[0].value; 

      var current = document.activeElement; 
     //Enter all Charcodes u want where u want to prevent keypress 
      if (code === 8 || code === 46) { 
      scope.isBackspacePressed=true; 
       } 
     }) 
      if (scope.digitOnly || scope.digitOnly == undefined) { 

       modelCtrl.$parsers.push(function (inputValue) { 
       console.log(scope.isBackspacePressed) 
       if(scope.isBackspacePressed) {scope.isBackspacePressed=false; return inputValue;} 
        if (inputValue == undefined) return ''; 
        if (attrs.digitOnly == "false") { 
         return inputValue; 
        } else { 
         var transformedInput = inputValue.replace(/[^0-9]/g, ''); 
         if (transformedInput != inputValue) { 
          modelCtrl.$setViewValue(transformedInput); 
          modelCtrl.$render(); 
         } 
         return transformedInput; 
        } 
       }); 
      } 
     } 
    }; 
}])

JSFiddle

來源

2017-02-17 12:24:40 amansinghgusain

在輸入中只輸入數字的最好方法是使用input type =「number」，這不是你要找的？

輸入這樣

<input type="number" name="sidNo" class="form-input" placeholder="Enter 5-6 digits" 
ng-minlength="5" maxlength="6" ng-model="profInfo.sidNo" required">

來源

2017-02-17 10:08:34 mpdev7

此方法允許用戶輸入無效字符，但不會正確驗證。所做的指令OP甚至不允許用戶輸入無效字符，它們立即被刪除。 –

最好的方法是使用數字，如@ mpdev7說，但與它一起使用NG模式，以防止無效字符：

<input type="number" ... etc />

然後你會爲你的正則表達式創建一個像這樣的常量：

.constant('allowedSpecialCharactersRegex', 
    /^[ a-zA-Z0-9!\"#\$£\%\&'\(\)\*\+\,\-\.\/\:\;\<\=\>\[email protected]\[\\\]\^_\`\{\|\}~]*$/)

然後改變你的t因此emplate（注意「VM」假設你有你的角度設立這樣的）：

<input type="number" ... ng-pattern="vm.allowedSpecialCharactersRegex" />

改變格局明顯，刪除你不想要個字符。

來源

2017-02-17 10:17:19 rrd

我想空白輸入文本框，如果有任何一個字符除數字只有當我複製粘貼一些字母數字文本。 – user3441151

AngularJS問題只允許將數字輸入到文本框中

回答

相關問題