Предотвращение ввода пользователем ввода без номера

Question

Мне нужно разрешить пользователю вводить только цифры. Вот что я сделал.

Порция шаблоне директивы:

<input type="text" maxlength="5" ng-keypress="allowNumbers($event)"> 

Функция в моей директиве:

$scope.allowNumbers= function (ev) { 
    var key = ev.charCode || ev.keyCode || 0; 
    var allowed = (
     key == 8 || 
     key == 9 || 
     key == 13 || 
     key == 46 || 
     key == 110 || 
     key == 190 || 
     (key >= 35 && key <= 40) || 
     (key >= 48 && key <= 57) || 
     (key >= 96 && key <= 105)); 

    return allowed; 
}; 

Во время отладки, я заметил, что даже функция возвращает true или false, значение в текстовом поле действительно становится Введенный , Могу ли я каким-то образом предотвратить это для немедленного нажатия клавиши?

Answer 1

я бы подойти к этому проще, и таким образом, что гарантированно поймать больше возможных форм ввода (например, копипаст):

<input type="number" ng-model="myNumber"> 

$scope.$watch('myNumber', function (input) { 
    $scope.myNumber = input.replace(/\D/g, ''); 
}); 

Answer 2

function IsNumeric(e) { 

var keyCode = e.keyCode == 0 ? e.charCode : e.keyCode; 
var ret = ((keyCode >= 48 && keyCode <= 57) || (specialKeys.indexOf(e.keyCode) != -1 && e.charCode != e.keyCode)); 
// document.getElementById("error").style.display = ret ? "none" : "inline"; 
return ret; 
} 

и в HTML

 <input type="text" onkeypress="return IsNumeric(event);" /> 

Answer 3

Вы можете использовать directive:

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

       return transformedInput; 
      }); 
     } 
    }; 
}); 

И использовать его как это:

<input type="text" maxlength="5" numbers-only/> 

Вы можете использовать это поведение в любой вход, необходимое, просто добавив атрибут numbers-only.

См. working JSFiddle.