2016-11-10 94 views
0

我已經創建了一個科爾多瓦離子應用程序。我已經嘗試了下面的代碼。該指令在iOS中正常工作,但在Android中不起作用。它允許用戶輸入特殊字符。任何人都可以請告訴我如何解決這個問題。離子手機號碼驗證Android

Register.html

    <label class="item item-input"> <span><i 
          class="icon ion-ios-telephone-outline"></i></span> <input type="number" 
         ng-pattern="/^[0-9]{10,10}$/" placeholder="Mobile" only-num 
         ng-model="register.mobile_number" name="mobile" ng-minlength="10" 
         ng-maxlength="10" required> 
        </label> 

app.js

  app.directive('onlyNum', function() { 
       return function(scope, element, attrs) { 

        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) { 
         console.log($.inArray(event.which,keyCode)); 
         if($.inArray(event.which,keyCode) == -1) { 
          scope.$apply(function(){ 
           scope.$eval(attrs.onlyNum); 
           event.preventDefault(); 
          }); 
          event.preventDefault(); 
         } 

        }); 
       }; 
      }); 

我曾嘗試下面的指令,以及:

Register.html

    <label class="item item-input"> <span><i 
          class="icon ion-ios-telephone-outline"></i></span> <input type="number" 
         ng-pattern="/^[0-9]{10,10}$/" placeholder="Mobile" allow-pattern="\d" 
         ng-model="register.mobile_number" name="mobile" ng-minlength="10" 
         ng-maxlength="10" required> 
        </label> 

app.js

app.directive('allowPattern', [allowPatternDirective]); 

      function allowPatternDirective() { 
       return { 
        restrict: "A", 
        compile: function(tElement, tAttrs) { 
         return function(scope, element, attrs) { 
          // I handle key events 
          element.bind("keypress", function(event) { 
           var keyCode = event.which || event.keyCode; // I safely get the keyCode pressed from the event. 
           var keyCodeChar = String.fromCharCode(keyCode); // I determine the char from the keyCode. 

           // If the keyCode char does not match the allowed Regex Pattern, then don't allow the input into the field. 
           if (!keyCodeChar.match(new RegExp(attrs.allowPattern, "i"))) { 
            event.preventDefault(); 
            return false; 
           } 

          }); 
         }; 
        } 
       }; 
      }; 

回答

0

請使用此指令,將只允許數字

app.directive('numbersOnly', function() { 

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

,並請包括這個指令在輸入申請

<input type="text" numbers-only> 

這對我來說工作很好

+0

它在Android中也有效嗎? –

+0

不能在我的情況下工作...您能否請提供其他解決方案... –

+0

請包括數字 - 只作爲指令在輸入字段這將工作 –