angularjs: позволяет только цифры должны быть набраны в текстовом поле

Question

В angularjs есть какие-либо функции доступны, что позволяет только цифры должны быть набраны в текстовом поле like

Answer 1

Эта функциональность именно то, что вам нужно. http://docs.angularjs.org/api/ng.directive:input.number

EDIT:

Вы можете обернуть JQuery плагин в директиве. Я создал пример здесь: http://jsfiddle.net/anazimok/jTJCF/

HTML:

<div ng-app="myApp"> 
    <div> 
     <input type="text" min="0" max="99" number-mask="" ng-model="message"> 
      <button ng-click="handleClick()">Broadcast</button> 
    </div> 

</div> 

CSS:

.ng-invalid { 
    border: 1px solid red; 
} 

JS:

// declare a module 
var app = angular.module('myApp', []); 

app.directive('numberMask', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      $(element).numeric(); 
     } 
    } 
}); 

Answer 2

Этот код показывает пример, как предотвратить ввод не значные символы ,

angular.module('app'). 
    directive('onlyDigits', 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; 
      }); 
     } 
    }; 
}); 

Answer 3

Чтобы построить на ответ Антона немного -

angular.module("app").directive("onlyDigits", function() 
{ 
    return { 
     restrict: 'EA', 
     require: '?ngModel', 
     scope:{ 
      allowDecimal: '@', 
      allowNegative: '@', 
      minNum: '@', 
      maxNum: '@' 
     }, 

     link: function (scope, element, attrs, ngModel) 
     { 
      if (!ngModel) return; 
      ngModel.$parsers.unshift(function (inputValue) 
      { 
       var decimalFound = false; 
       var digits = inputValue.split('').filter(function (s,i) 
       { 
        var b = (!isNaN(s) && s != ' '); 
        if (!b && attrs.allowDecimal && attrs.allowDecimal == "true") 
        { 
         if (s == "." && decimalFound == false) 
         { 
          decimalFound = true; 
          b = true; 
         } 
        } 
        if (!b && attrs.allowNegative && attrs.allowNegative == "true") 
        { 
         b = (s == '-' && i == 0); 
        } 

        return b; 
       }).join(''); 
       if (attrs.maxNum && !isNaN(attrs.maxNum) && parseFloat(digits) > parseFloat(attrs.maxNum)) 
       { 
        digits = attrs.maxNum; 
       } 
       if (attrs.minNum && !isNaN(attrs.minNum) && parseFloat(digits) < parseFloat(attrs.minNum)) 
       { 
        digits = attrs.minNum; 
       } 
       ngModel.$viewValue = digits; 
       ngModel.$render(); 

       return digits; 
      }); 
     } 
    }; 
}); 

Answer 4

HTML

<input type="text" name="number" only-digits> 

// Просто введите 123

.directive('onlyDigits', function() { 
    return { 
     require: 'ngModel', 
     restrict: 'A', 
     link: function (scope, element, attr, ctrl) { 
     function inputValue(val) { 
      if (val) { 
      var digits = val.replace(/[^0-9]/g, ''); 

      if (digits !== val) { 
       ctrl.$setViewValue(digits); 
       ctrl.$render(); 
      } 
      return parseInt(digits,10); 
      } 
      return undefined; 
     }    
     ctrl.$parsers.push(inputValue); 
     } 
    }; 
}); 

// Тип: 123 или 123,45

.directive('onlyDigits', function() { 
    return { 
     require: 'ngModel', 
     restrict: 'A', 
     link: function (scope, element, attr, ctrl) { 
     function inputValue(val) { 
      if (val) { 
      var digits = val.replace(/[^0-9.]/g, ''); 

      if (digits.split('.').length > 2) { 
       digits = digits.substring(0, digits.length - 1); 
      } 

      if (digits !== val) { 
       ctrl.$setViewValue(digits); 
       ctrl.$render(); 
      } 
      return parseFloat(digits); 
      } 
      return undefined; 
     }    
     ctrl.$parsers.push(inputValue); 
     } 
    }; 
}); 

Answer 5

Я только что использовал ng-keypress в директиве для ввода.

HTML:

<input type="text" ng-keypress="filterValue($event)"/> 

JS:

$scope.filterValue = function($event){ 
     if(isNaN(String.fromCharCode($event.keyCode))){ 
      $event.preventDefault(); 
     } 
}; 

Answer 6

Вы можете проверить https://github.com/rajesh38/ng-only-number

1. Это ограничивает ввод в цифры и десятичной точки в текстовом поле при вводе.
2. Вы можете ограничить количество цифр, которое должно быть разрешено до и после десятичной точки
3. Он также обрезает цифры после десятичной точки, если десятичная точка удалена из текстового поля, например. если вы положили 123.45, а затем удалили десятичную точку, она также удалит конечные цифры после десятичной точки и сделает ее 123.

Answer 7

Это самый простой и быстрый способ для ввода только числа.

<input type="text" id="cardno" placeholder="Enter a Number" onkeypress='return event.charCode >= 48 && event.charCode <= 57' required> 

Благодаря

Answer 8

Это метод, который работает для меня.Он основан в samnau anwser, но позволяет представить форму с ENTER, увеличивать и уменьшать число с UP и DOWN стрел, издание с DEL, BACKSPACE, LEFT и RIGHT и перемещаться корыта поля с TAB. Обратите внимание, что он работает для целых положительных чисел, таких как сумма.

HTML:

<input ng-keypress="onlyNumbers($event)" min="0" type="number" step="1" ng-pattern="/^[0-9]{1,8}$/" ng-model="... > 

ANGULARJS:

$scope.onlyNumbers = function(event){ 
    var keys={ 
     'up': 38,'right':39,'down':40,'left':37, 
     'escape':27,'backspace':8,'tab':9,'enter':13,'del':46, 
     '0':48,'1':49,'2':50,'3':51,'4':52,'5':53,'6':54,'7':55,'8':56,'9':57 
    }; 
    for(var index in keys) { 
     if (!keys.hasOwnProperty(index)) continue; 
     if (event.charCode==keys[index]||event.keyCode==keys[index]) { 
      return; //default event 
     } 
    } 
    event.preventDefault(); 
}; 

Answer 9

У меня была аналогичная проблема и в конечном итоге закреплять и событие

ng-change="changeCount()" 

затем:

self.changeCount = function() { 
     if (!self.info.itemcount) { 
     self.info.itemcount = 1; 
     } 
}; 

Таким образом, пользователь по умолчанию считается 1, если вставлен недопустимый номер.

Answer 10

Основано на djsiz решение, завернутое в директиву. Примечание: это не будет обрабатывать значные номера, но она может быть легко модернизирована

angular 
     .module("app") 
     .directive("mwInputRestrict", [ 
      function() { 
       return { 
        restrict: "A", 
        link: function (scope, element, attrs) { 
         element.on("keypress", function (event) { 
          if (attrs.mwInputRestrict === "onlynumbers") { 
           // allow only digits to be entered, or backspace and delete keys to be pressed 
           return (event.charCode >= 48 && event.charCode <= 57) || 
             (event.keyCode === 8 || event.keyCode === 46); 
          } 
          return true; 
         }); 
        } 
       } 
      } 
     ]); 

HTML

<input type="text" 
     class="form-control" 
     id="inputHeight" 
     name="inputHeight" 
     placeholder="Height" 
     mw-input-restrict="onlynumbers" 
     ng-model="ctbtVm.dto.height"> 

Answer 11

Мое решение принять Копировать & Вставить и сохранить позицию курсора. Он используется для стоимости продуктов, поэтому позволяет использовать только положительные десятичные значения. Может быть рефактористом очень легко разрешить отрицательные или целые цифры.

angular 
     .module("client") 
     .directive("onlyNumber", function() { 
      return { 
       restrict: "A", 
       link: function (scope, element, attr) { 
        element.bind('input', function() { 
         var position = this.selectionStart - 1; 

         //remove all but number and . 
         var fixed = this.value.replace(/[^0-9\.]/g, ''); 
         if (fixed.charAt(0) === '.')     //can't start with . 
          fixed = fixed.slice(1); 

         var pos = fixed.indexOf(".") + 1; 
         if (pos >= 0)    //avoid more than one . 
          fixed = fixed.substr(0, pos) + fixed.slice(pos).replace('.', ''); 

         if (this.value !== fixed) { 
          this.value = fixed; 
          this.selectionStart = position; 
          this.selectionEnd = position; 
         } 
        }); 
       } 
      }; 
     }); 

Put на странице HTML:

<input type="text" class="form-control" only-number ng-model="vm.cost" /> 

Answer 12

Вы могли бы сделать что-то вроде этого: Используйте нг-шаблон с RegExp "/^ [0-9] + $/ «это означает, что действительны только целые числа.

<form novalidate name="form"> 
    <input type="text" data-ng-model="age" id="age" name="age" ng-pattern="/^[0-9]+$/"> 
    <span ng-show="form.age.$error.pattern">The value is not a valid integer</span> 
</form> 

Answer 13

Просто использовать HTML5

<input type="number" min="0"/> 

Answer 14

Я arraged на JQuery в this

.directive('numbersCommaOnly', function(){ 
    return { 
    require: 'ngModel', 
    link: function (scope, element, attrs, ngModel) { 

     element.on('keydown', function(event) {     
      // Allow: backspace, delete, tab, escape, enter and . 
      var array2 = [46, 8, 9, 27, 13, 110, 190] 
      if (array2.indexOf(event.which) !== -1 || 
       // Allow: Ctrl+A 
       (event.which == 65 && event.ctrlKey === true) || 
       // Allow: Ctrl+C 
       (event.which == 67 && event.ctrlKey === true) || 
       // Allow: Ctrl+X 
       (event.which == 88 && event.ctrlKey === true) || 
       // Allow: home, end, left, right 
       (event.which >= 35 && event.which <= 39)) { 
        // let it happen, don't do anything 
        return; 
      } 
      // Ensure that it is a number and stop the keypress 
      if ((event.shiftKey || (event.which < 48 || event.which > 57)) && (event.which < 96 || event.which > 105)) { 
       event.preventDefault(); 
      } 
     }); 

    } 
    }; 
}) 

Answer 15

Это решение будет принимать только числовые, '' и '-'

Также это ограничивает запись пространства в текстовом поле. Я использовал директиву для достижения того же.

Пожалуйста, обратитесь к нижеприведенному рабочему примеру.

http://jsfiddle.net/vfsHX/2697/

HTML:

<form ng-app="myapp" name="myform" novalidate> 
<div ng-controller="Ctrl"> 
<input name="number" is-number ng-model="wks.number"> 
<span ng-show="!wks.validity">Value is invalid</span> 
</div> 

JS:

var $scope; 
var app = angular.module('myapp', []); 

app.controller('Ctrl', function($scope) { 
    $scope.wks = {number: 1, validity: true} 
}); 

app.directive('isNumber', function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, element, attrs, ngModel) { 
     element.bind("keydown keypress", function (event) { 
      if(event.which === 32) { 
      event.returnValue = false; 
      return false; 
      } 
     }); 
      scope.$watch(attrs.ngModel, function(newValue,oldValue) { 
       var arr = String(newValue).split(""); 
       if (arr.length === 0) return; 
       if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.')) return; 
       if (arr.length === 2 && newValue === '-.') return; 
       if (isNaN(newValue)) { 
        //scope.wks.number = oldValue; 
        ngModel.$setViewValue(oldValue); 
            ngModel.$render(); 
       } 
      }); 

     } 
    }; 
}); 

Answer 16

Используйте ng-only-number, чтобы позволить только цифры, например:

<input type="text" ng-only-number data-max-length=5> 

Answer 17

Это просто и понятно. Просто скопируйте этот код, и ваша проблема будет решена. Для большего количества условий просто измените значение в pattern.and ваша работа будет выполнена.

<input type="text" pattern="[0-9]{0,}" oninvalid="this.setCustomValidity('Please enter only numeric value. Special character are not allowed.')" oninput="setCustomValidity('')"> 

Answer 18

<input type="text" ng-keypress="checkNumeric($event)"/> 
//inside controller 
$scope.dot = false 
$scope.checkNumeric = function($event){ 
if(String.fromCharCode($event.keyCode) == "." && !$scope.dot){ 
    $scope.dot = true 
} 
else if(isNaN(String.fromCharCode($event.keyCode))){ 
    $event.preventDefault(); 
}