[RUBY-ON-RAILS] AngularJS와 : 숫자 만 텍스트 상자에 입력 할 수 있습니다

AngularJS와 : 숫자 만 텍스트 상자에 입력 할 수 있습니다

AngularJS와에서 숫자 만 같은 텍스트 상자에 입력 할 수 있습니다 사용할 수있는 기능이있다

해결법

1. ==============================

   1.이 기능은 당신이 필요로 그냥 뭐. http://docs.angularjs.org/api/ng.directive:input.number

   이 기능은 당신이 필요로 그냥 뭐. http://docs.angularjs.org/api/ng.directive:input.number

   편집하다:

   당신은 지시에 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();
           }
       }
   });
   

2. ==============================

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

3. ==============================

   3.HTML

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

4. ==============================

   4.난 그냥 내 입력을위한 지침에 겨-의 키를 사용했다.

   난 그냥 내 입력을위한 지침에 겨-의 키를 사용했다.

   HTML :

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

   JS :

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

5. ==============================

   5.이것은 단지 숫자 입력을 허용하는, 간단하고 빠른 방법입니다.

   이것은 단지 숫자 입력을 허용하는, 간단하고 빠른 방법입니다.

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

   감사

6. ==============================

   6.안톤의 대답은 조금에 구축하기 위해 -

   안톤의 대답은 조금에 구축하기 위해 -

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

7. ==============================

   7.내 솔루션은 복사를 허용 & 붙여 넣기 캐럿의 위치를 ​​저장합니다. 그것은 제품의 비용을 사용 그래서 양의 10 진수 값 만 수 있습니다. 아주 쉽게 부정하거나 정수 숫자를 허용하기 위해 리팩토링을 할 수 있습니다.

   내 솔루션은 복사를 허용 & 붙여 넣기 캐럿의 위치를 ​​저장합니다. 그것은 제품의 비용을 사용 그래서 양의 10 진수 값 만 수 있습니다. 아주 쉽게 부정하거나 정수 숫자를 허용하기 위해 리팩토링을 할 수 있습니다.

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

   HTML 페이지에 넣어 :

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

8. ==============================

   8.이것은 나를 위해 작동하는 방법입니다. 그것은 samnau anwser 기반으로하지만, ENTER 증가와 DEL, 백 스페이스, 왼쪽 및 오른쪽, 및 TAB와 탐색 트로프 필드 UP과 DOWN 화살표 에디션 수를 감소와 양식을 제출할 수있다. 이 같은 양으로 양의 정수에 대해 작동합니다.

   이것은 나를 위해 작동하는 방법입니다. 그것은 samnau anwser 기반으로하지만, ENTER 증가와 DEL, 백 스페이스, 왼쪽 및 오른쪽, 및 TAB와 탐색 트로프 필드 UP과 DOWN 화살표 에디션 수를 감소와 양식을 제출할 수있다. 이 같은 양으로 양의 정수에 대해 작동합니다.

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

9. ==============================

   9.djsiz 솔루션을 기반으로, 지침에 싸여. 참고 :이 자리 숫자를 처리하지 않습니다, 그러나 그것은 쉽게 업데이트 할 수 있습니다

   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">
   

10. ==============================

    10.간단하게 사용 HTML5

    간단하게 사용 HTML5

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

11. ==============================

    11.당신은 확인할 수 있습니다 https://github.com/rajesh38/ng-only-number

    당신은 확인할 수 있습니다 https://github.com/rajesh38/ng-only-number

12. ==============================

    12.당신이 뭔가를 할 수 있습니다 : 정규 표현식으로 사용 NG 패턴 "/ ^ [0-9] + $ /"숫자 만 정수 수단이 유효한지.

    당신이 뭔가를 할 수 있습니다 : 정규 표현식으로 사용 NG 패턴 "/ ^ [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>
    

13. ==============================

    13.이 솔루션은, 숫자 만 받아 들일 것 '.' 그리고 '-'

    이 솔루션은, 숫자 만 받아 들일 것 '.' 그리고 '-'

    또한이 텍스트 상자의 공간 항목을 제한합니다. 나는 동일을 달성하기 위해 지침을 사용했다.

    예를 들어 작업 아래에 솔루션을하시기 바랍니다.

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

14. ==============================

    14.그것은 간단하고 이해합니다. 그냥이 코드를 붙여 복사하여 문제 resolved.For 이상의 조건이 그냥 값을 변경 pattern.and 작업이 완료됩니다 얻을 것이다.

    그것은 간단하고 이해합니다. 그냥이 코드를 붙여 복사하여 문제 resolved.For 이상의 조건이 그냥 값을 변경 pattern.and 작업이 완료됩니다 얻을 것이다.

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

15. ==============================

    15.

    <input type="phone" numbers-only >
    

    당신이 숫자 만 원하는 경우이 방법을 사용할 수 있습니다 :

    여기 데모 클릭입니다

16. ==============================

    16.나는 비슷한 문제를 가지고 있었고, 접선 및 이벤트 끝났다

    나는 비슷한 문제를 가지고 있었고, 접선 및 이벤트 끝났다

    ng-change="changeCount()" 
    

    그때:

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

    사용자가 한 디폴트로 그래서 유효하지 않은 번호가 삽입되어있는 경우.

17. ==============================

    17.나는이에 jQuery를 배치

    나는이에 jQuery를 배치

    .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();
                }
             });
    
         }
       };
    })
    

18. ==============================

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

19. ==============================

    19.나는 이것이 이전 게시물입니다 알고 있지만 내 마이의 대답이 적응 나를 위해 잘 작동 ...

    나는 이것이 이전 게시물입니다 알고 있지만 내 마이의 대답이 적응 나를 위해 잘 작동 ...

    angular.module("app").directive("numbersOnly", function() {
      return {
        require: "ngModel",
        restrict: "A",
        link: function(scope, element, attr, ctrl) {
            function inputValue(val) {
                if (val) {
                    //transform val to a string so replace works
                    var myVal = val.toString();
    
                    //replace any non numeric characters with nothing
                    var digits = myVal.replace(/\D/g, "");
    
                    //if anything needs replacing - do it!
                    if (digits !== myVal) {
                        ctrl.$setViewValue(digits);
                        ctrl.$render();
                    }
                    return parseFloat(digits);
                }
                return undefined;
            }
            ctrl.$parsers.push(inputValue);
        }
      };
    });
    

20. ==============================

    20.나는에서 수행 한

    나는에서 수행 한

    JS

    $scope.numberOnly="(^[0-9]+$)";
    

    .html 중에서

    <input type="text" name="rollNo" ng-model="stud.rollNo" ng-pattern="numberOnly" ng-maxlength="10" maxlength="10" md-maxlength="10" ng-required="true" >
    

21. ==============================

    21.이 답변 레오폴도의 대답을 통해 단순화 및 최적화 역할을합니다.

    이 답변 레오폴도의 대답을 통해 단순화 및 최적화 역할을합니다.

    이 같은 모든를 keyDown에 대한 귀하의 의견에서 함수를 트리거 :

    <input type="text" ng-keydown="onlyNumbers($event);"/>
    

    당신은 당신의 컨트롤러에서이 방식으로 기능을 설명 할 수

    $scope.onlyNumbers = function(event){    
        // '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
        var keys = { 38:true,39:true,40:true,37:true,27:true,8:true,9:true,13:true,
                     46:true,48:true,49:true, 50:true,51:true,52:true,53:true,
                     54:true,55:true,56:true,57:true };
    
        // if the pressed key is not listed, do not perform any action
        if(!keys[event.keyCode]) { event.preventDefault(); }
    }
    

    당신이 각도 2+를 사용하는 경우, 당신은이 방법으로이 같은 함수를 호출 할 수 있습니다 :

    <input type="text" (keydown)="onlyNumbers($event);"/>
    

    귀하의 각도 2+ 기능은 다음과 같이 보일 것이다 :

    onlyNumbers(event) { // the logic here }
    

22. ==============================

    22.사용 NG 전용 번호는 예를 들어 숫자 만 허용합니다 :

    사용 NG 전용 번호는 예를 들어 숫자 만 허용합니다 :

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

23. ==============================

    23.

     <input
        onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||                         
        event.charCode == 0 || event.charCode == 46">
    

from https://stackoverflow.com/questions/16091218/angularjs-allows-only-numbers-to-be-typed-into-a-text-box by cc-by-sa and MIT license