কেবলমাত্র সংখ্যা গ্রহণ করতে আমি কীভাবে একটি ইনপুট সীমাবদ্ধ করব?

Question 1

আমি কাস্টম ফাংশন ট্রিগার করতে AngularJS এ এনজিচঞ্জ ব্যবহার করছি যা ব্যবহারকারীরা ইনপুটটিতে যে কোনও অক্ষর যুক্ত করবে তা সরিয়ে ফেলবে।

<input type="text" name="inputName" data-ng-change="numbersOnly()"/>

সমস্যাটি হ'ল আমাকে যে ইনপুটটি ট্রিগার করেছিল তা টার্গেট করতে হবে numbersOnly()যাতে আমি প্রবেশ করা অক্ষরগুলি সরিয়ে ফেলতে পারি। আমি গুগলের উপর দীর্ঘ এবং কঠোর তাকিয়েছি এবং এ সম্পর্কিত কিছু খুঁজে পেতে অক্ষম।

আমি কি করতে পারি?

Question 2

সহজ উপায় , টাইপ = "সংখ্যা" ব্যবহার করুন যদি এটি আপনার ব্যবহারের ক্ষেত্রে কাজ করে:

<input type="number" ng-model="myText" name="inputName">

আরেকটি সহজ উপায়: এনজি-প্যাটার্নটি একটি রেইজেক্স সংজ্ঞায়িত করতেও ব্যবহার করা যেতে পারে যা ক্ষেত্রের মধ্যে যা অনুমোদিত তা সীমাবদ্ধ করবে। ফর্মগুলি সম্পর্কে "কুকবুক" পৃষ্ঠাটিও দেখুন ।

হ্যাকিশ? উপায় , control আপনার নিয়ামকটিতে এনজি-মডেলটি দেখুন:

<input type="text"  ng-model="myText" name="inputName">

নিয়ামক:

$scope.$watch('myText', function() {
   // put numbersOnly() logic here, e.g.:
   if ($scope.myText  ... regex to look for ... ) {
      // strip out the non-numbers
   }
})

সর্বোত্তম উপায় , নির্দেশে একটি পার্সার ব্যবহার করুন। আমি @ পকোজলোস্কি.ওপেনসোর্স দ্বারা সরবরাহিত ইতিমধ্যে ভাল উত্তরের পুনরাবৃত্তি করতে যাচ্ছি না, তাই এখানে লিঙ্কটি দেওয়া হয়েছে: https://stackoverflow.com/a/14425022/215945

উপরের সমস্ত সমাধানগুলির মধ্যে এনজি-মডেল ব্যবহার করা জড়িত যা অনুসন্ধানকে thisঅপ্রয়োজনীয় করে তোলে।

এনজি-চেঞ্জ ব্যবহার সমস্যার কারণ হবে। অ্যাঙ্গুলারজেএস দেখুন - $ স্কোপ পুনরায় সেট করুন val মূল্যটি টেমপ্লেটে মান পরিবর্তন করে না (এলোমেলো আচরণ)

Question 3

ng-patternপাঠ্য ক্ষেত্রে ব্যবহার :

<input type="text"  ng-model="myText" name="inputName" ng-pattern="onlyNumbers">

তারপরে এটি আপনার নিয়ামকটিতে অন্তর্ভুক্ত করুন

$scope.onlyNumbers = /^\d+$/;

Question 4

প্রস্তাবিত কোনও সমাধানই আমার পক্ষে ভাল কাজ করেনি এবং কয়েক ঘন্টা পরে অবশেষে আমি উপায়টি খুঁজে পেয়েছি।

এটি কৌণিক নির্দেশ:

angular.module('app').directive('restrictTo', function() {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var re = RegExp(attrs.restrictTo);
            var exclude = /Backspace|Enter|Tab|Delete|Del|ArrowUp|Up|ArrowDown|Down|ArrowLeft|Left|ArrowRight|Right/;

            element[0].addEventListener('keydown', function(event) {
                if (!exclude.test(event.key) && !re.test(event.key)) {
                    event.preventDefault();
                }
            });
        }
    }
});

এবং ইনপুটটি দেখতে এমন হবে:

<input type="number" min="0" name="inputName" ng-model="myModel" restrict-to="[0-9]">

নিয়মিত এক্সপ্রেশনটি চাপযুক্ত কীকে মূল্যায়ন করে, মানটি না ।

এটি ইনপুটগুলির সাথেও নিখুঁতভাবে কাজ করে type="number"কারণ এর মান পরিবর্তন করতে বাধা দেয়, তাই কীটি কখনই প্রদর্শিত হয় না এবং এটি মডেলটির সাথে গোলমাল করে না।

Question 5

$parser@ মার্ক রাজকোক সেরা পদ্ধতি হিসাবে প্রস্তাবিত সমাধানটির আমার বাস্তবায়নটি এখানে । এটি টেক্সট উত্তরের জন্য মূলত @ pkozlowski.opensource এর দুর্দান্ত $ পার্সার তবে কেবল সংখ্যার অনুমতি দেওয়ার জন্য এটি পুনরায় লিখে rit সমস্ত কৃতিত্ব তাঁর কাছে যায়, এটি আপনাকে উত্তরটি পড়ার 5 মিনিটের সময় বাঁচাতে এবং তারপরে আপনার নিজের পুনরায় লেখার জন্য:

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

            modelCtrl.$parsers.push(function (inputValue) {
                var transformedInput = inputValue ? inputValue.replace(/[^\d.-]/g,'') : null;

                if (transformedInput!=inputValue) {
                    modelCtrl.$setViewValue(transformedInput);
                    modelCtrl.$render();
                }

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

এবং আপনি এটি এটি ব্যবহার করতে চাই:

<input type="text" name="number" ng-model="num_things" numeric-only>

মজার বিষয় হচ্ছে, বর্ণমালা দ্বারা ঘেরা না করে স্পেস কখনও পার্সারে পৌঁছায় না, সুতরাং আপনার .trim()প্রয়োজন মতো করতে হবে। এছাড়াও, এই পার্সারটি কাজ করে না<input type="number"> । কিছু কারণে অ-সংখ্যাসূচকরা কখনই সেই পার্সারে যেখানে সেগুলি সরিয়ে ফেলা হবে তা তৈরি করে না , তবে তারা এটিকে নিজেই ইনপুট নিয়ন্ত্রণে পরিণত করে।

Question 6

এটি করার কয়েকটি উপায় রয়েছে।

আপনি ব্যবহার করতে পারেন type="number":

<input type="number" />

বিকল্পভাবে - আমি এটির জন্য একটি পুনঃব্যবহারযোগ্য নির্দেশিকা তৈরি করেছি যা নিয়মিত অভিব্যক্তি ব্যবহার করে।

এইচটিএমএল

<div ng-app="myawesomeapp">
    test: <input restrict-input="^[0-9-]*$" maxlength="20" type="text" class="test" />
</div>

জাভাস্ক্রিপ্ট

;(function(){
    var app = angular.module('myawesomeapp',[])
    .directive('restrictInput', [function(){

        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                var ele = element[0];
                var regex = RegExp(attrs.restrictInput);
                var value = ele.value;

                ele.addEventListener('keyup',function(e){
                    if (regex.test(ele.value)){
                        value = ele.value;
                    }else{
                        ele.value = value;
                    }
                });
            }
        };
    }]);    
}());

Question 7

এখানে কেবলমাত্র নম্বর প্রবেশের অনুমতি দেওয়ার জন্য একটি দুর্দান্ত সমাধান রয়েছে input:

<input type="text" ng-model="myText" name="inputName" onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>

Question 8

উপরের সমস্ত সমাধানগুলি বেশ বড়, আমি এটিতে আমার 2 সেন্ট দিতে চেয়েছিলাম।

আমি কেবল পরীক্ষা করেই দেখছি যে ইনপুটযুক্ত মানটি একটি সংখ্যা বা না, এবং এটি খালি নয় কিনা তা খতিয়ে দেখছি that's

এইচটিএমএল:

<input type="text" ng-keypress="CheckNumber()"/>

এখানে জেএস:

$scope.CheckKey = function () {
    if (isNaN(event.key) || event.key === ' ' || event.key === '') {
        event.returnValue = '';
    }
};

এটা বেশ সহজ।

আমি এই পেস্টটি এই কাজটি বিশ্বাস করি না, ঠিক তাই এটি জানা যায়।

আটকানোর জন্য, আমার মনে হয় আপনার onChange ইভেন্টটি ব্যবহার করা এবং পুরো স্ট্রিংটি পার্স করা দরকার, আরও একটি জন্তুটি তামেমে। এটি টাইপিংয়ের জন্য নির্দিষ্ট।

আটকানোর জন্য আপডেট : কেবল এই জেএস ফাংশন যুক্ত করুন:

$scope.CheckPaste = function () {
    var paste = event.clipboardData.getData('text');

    if (isNaN(paste)) {
        event.preventDefault();
        return false;
    }
};

এবং এইচটিএমএল ইনপুটটি ট্রিগার যুক্ত করে:

<input type="text" ng-paste="CheckPaste()"/>

আমি আশা করি এটি ও /

Question 9

প্রস্তাবের উপরের যে কোনও পরিস্থিতি হ্যান্ডেল করে না এমন এখানে একটি প্লঙ্কার রয়েছে ।
$ ফর্ম্যাটর এবং $ পার্সার পাইপলাইন ব্যবহার করে এবং টাইপ = "সংখ্যা" এড়ানো

এবং এখানে সমস্যা / সমাধানগুলির ব্যাখ্যা (প্লাঙ্কারেও পাওয়া যায়):

/*
 *
 * Limit input text for floating numbers.
 * It does not display characters and can limit the Float value to X numbers of integers and X numbers of decimals.
 * min and max attributes can be added. They can be Integers as well as Floating values.
 *
 * value needed    |    directive
 * ------------------------------------
 * 55              |    max-integer="2"
 * 55.55           |    max-integer="4" decimal="2" (decimals are substracted from total length. Same logic as database NUMBER type)
 *
 *
 * Input type="number" (HTML5)
 *
 * Browser compatibility for input type="number" :
 * Chrome : - if first letter is a String : allows everything
 *          - if first letter is a Integer : allows [0-9] and "." and "e" (exponential)
 * Firefox : allows everything
 * Internet Explorer : allows everything
 *
 * Why you should not use input type="number" :
 * When using input type="number" the $parser pipeline of ngModel controller won't be able to access NaN values.
 * For example : viewValue = '1e'  -> $parsers parameter value = "".
 * This is because undefined values are not allowes by default (which can be changed, but better not do it)
 * This makes it impossible to modify the view and model value; to get the view value, pop last character, apply to the view and return to the model.
 *
 * About the ngModel controller pipelines :
 * view value -> $parsers -> model value
 * model value -> $formatters -> view value
 *
 * About the $parsers pipeline :
 * It is an array of functions executed in ascending order.
 * When used with input type="number" :
 * This array has 2 default functions, one of them transforms the datatype of the value from String to Number.
 * To be able to change the value easier (substring), it is better to have access to a String rather than a Number.
 * To access a String, the custom function added to the $parsers pipeline should be unshifted rather than pushed.
 * Unshift gives the closest access to the view.
 *
 * About the $formatters pipeline :
 * It is executed in descending order
 * When used with input type="number"
 * Default function transforms the value datatype from Number to String.
 * To access a String, push to this pipeline. (push brings the function closest to the view value)
 *
 * The flow :
 * When changing ngModel where the directive stands : (In this case only the view has to be changed. $parsers returns the changed model)
 *     -When the value do not has to be modified :
 *     $parsers -> $render();
 *     -When the value has to be modified :
 *     $parsers(view value) --(does view needs to be changed?) -> $render();
 *       |                                  |
 *       |                     $setViewValue(changedViewValue)
 *       |                                  |
 *       --<-------<---------<--------<------
 *
 * When changing ngModel where the directive does not stand :
 *     - When the value does not has to be modified :
 *       -$formatters(model value)-->-- view value
 *     -When the value has to be changed
 *       -$formatters(model vale)-->--(does the value has to be modified) -- (when loop $parsers loop is finished, return modified value)-->view value
 *                                              |
 *                                  $setViewValue(notChangedValue) giving back the non changed value allows the $parsers handle the 'bad' value
 *                                               |                  and avoids it to think the value did not changed
 *                Changed the model <----(the above $parsers loop occurs)
 *
 */

Question 10

   <input type="text" name="profileChildCount" id="profileChildCount" ng-model="profile.ChildCount" numeric-only maxlength="1" />

আপনি সংখ্যাসূচক বৈশিষ্ট্যটি ব্যবহার করতে পারেন।

Question 11

সিদ্ধান্ত নিন

directive('decimal', 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 "";
                        }
                        ctrl.$parsers.push(inputValue);
                    }
                };
            });

ডিজিটস

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

                            if (digits !== value) {
                                ctrl.$setViewValue(digits);
                                ctrl.$render();
                            }
                            return parseInt(digits);
                        }
                        return "";
                    }
                    ctrl.$parsers.push(inputValue);
                }
            };
        });

বৈধ সংখ্যাগুলির জন্য কৌনিক নির্দেশাবলী

Question 12

আমি জানি এটি পুরানো, তবে যে কেউ সহজ সমাধানের সন্ধান করতে চাইলে আমি এই উদ্দেশ্যে একটি নির্দেশিকা তৈরি করেছি। ব্যবহার করা খুব সহজ।

আপনি এটি এখানে পরীক্ষা করে দেখতে পারেন ।

Question 13

আপনি ইনপুটটির শুরুতে 0 টিও মুছে ফেলতে চাইতে পারেন ... উপরের মর্ড্রেড উত্তরে আমি কেবল একটি ইফ ব্লক যুক্ত করব কারণ আমি এখনও কোনও মন্তব্য করতে পারছি না ...

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

          modelCtrl.$parsers.push(function (inputValue) {
              var transformedInput = inputValue ? inputValue.replace(/[^\d.-]/g,'') : null;

              if (transformedInput!=inputValue) {
                  modelCtrl.$setViewValue(transformedInput);
                  modelCtrl.$render();
              }
              //clear beginning 0
              if(transformedInput == 0){
                modelCtrl.$setViewValue(null);
                modelCtrl.$render();
              }
              return transformedInput;
          });
      }
    };
  })

Question 14

এটা চেষ্টা কর,

<input ng-keypress="validation($event)">

 function validation(event) {
    var theEvent = event || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode(key);
    var regex = /[0-9]|\./;
    if (!regex.test(key)) {
        theEvent.returnValue = false;
        if (theEvent.preventDefault) theEvent.preventDefault();
    }

}

Question 15

সমাধান: আমি অ্যাপ্লিকেশনটিতে সমস্ত ইনপুট, সংখ্যা, পাঠ্য বা যে কোনও একটির জন্য একটি নির্দেশনা তৈরি করি, যাতে আপনি কোনও মান ইনপুট করতে পারেন এবং ইভেন্টটি পরিবর্তন করতে পারেন। কৌণিক 6 জন্য তৈরি করুন

 import { Directive, ElementRef, HostListener, Input } from '@angular/core';

 @Directive({
// tslint:disable-next-line:directive-selector
selector: 'input[inputType]'
})
  export class InputTypeDirective {
 constructor(private _el: ElementRef) {}

 @Input() inputType: string;
 // tipos: number, letter, cuit, tel

@HostListener('input', ['$event']) onInputChange(event) {
if (!event.data) {
  return;
}

switch (this.inputType) {
  case 'number': {
    const initalValue = this._el.nativeElement.value;
    this._el.nativeElement.value = initalValue.replace(/[^0-9]*/g, '');
    if (initalValue !== this._el.nativeElement.value) {
      event.stopPropagation();
    }
     break;
          }
       case 'text': {
        const result = event.data.match(/[^a-zA-Z Ññ]*/g);
        if (result[0] !== '') {
           const initalValue = this._el.nativeElement.value;
           this._el.nativeElement.value = initalValue.replace(
          /[^a-zA-Z Ññ]*/g,
           ''
         );
           event.stopPropagation();
        }
        break;
    }
        case 'tel':
          case 'cuit': {
         const initalValue = this._el.nativeElement.value;
      this._el.nativeElement.value = initalValue.replace(/[^0-9-]*/g, '');
       if (initalValue !== this._el.nativeElement.value) {
         event.stopPropagation();
       }
     }
   }
  }
   }

এইচটিএমএল

     <input matInput inputType="number" [formControlName]="field.name" [maxlength]="field.length" [placeholder]="field.label | translate"  type="text" class="filter-input">

Question 16

ইনপুট গ্রহণ করতে এবং ফ্লাইতে ফর্ম্যাটটি পরিবর্তন করতে আমি উপরের কোডটির একটি পরিবর্তিত নির্দেশিকা তৈরি শেষ করেছি ...

.directive('numericOnly', function($filter) {
  return {
      require: 'ngModel',
      link: function(scope, element, attrs, modelCtrl) {

           element.bind('keyup', function (inputValue, e) {
             var strinput = modelCtrl.$$rawModelValue;
             //filter user input
             var transformedInput = strinput ? strinput.replace(/[^,\d.-]/g,'') : null;
             //remove trailing 0
             if(transformedInput.charAt(0) <= '0'){
               transformedInput = null;
               modelCtrl.$setViewValue(transformedInput);
               modelCtrl.$render();
             }else{
               var decimalSplit = transformedInput.split(".")
               var intPart = decimalSplit[0];
               var decPart = decimalSplit[1];
               //remove previously formated number
               intPart = intPart.replace(/,/g, "");
               //split whole number into array of 3 digits
               if(intPart.length > 3){
                 var intDiv = Math.floor(intPart.length / 3);
                 var strfraction = [];
                 var i = intDiv,
                     j = 3;

                 while(intDiv > 0){
                   strfraction[intDiv] = intPart.slice(intPart.length-j,intPart.length - (j - 3));
                   j=j+3;
                   intDiv--;
                 }
                 var k = j-3;
                 if((intPart.length-k) > 0){
                   strfraction[0] = intPart.slice(0,intPart.length-k);
                 }
               }
               //join arrays
               if(strfraction == undefined){ return;}
                 var currencyformat = strfraction.join(',');
                 //check for leading comma
                 if(currencyformat.charAt(0)==','){
                   currencyformat = currencyformat.slice(1);
                 }

                 if(decPart ==  undefined){
                   modelCtrl.$setViewValue(currencyformat);
                   modelCtrl.$render();
                   return;
                 }else{
                   currencyformat = currencyformat + "." + decPart.slice(0,2);
                   modelCtrl.$setViewValue(currencyformat);
                   modelCtrl.$render();
                 }
             }
            });
      }
  };

})

Question 17

<input type="text" ng-model="employee.age" valid-input input-pattern="[^0-9]+" placeholder="Enter an age" />

<script>
var app = angular.module('app', []);

app.controller('dataCtrl', function($scope) {
});

app.directive('validInput', function() {
  return {
    require: '?ngModel',
    scope: {
      "inputPattern": '@'
    },
    link: function(scope, element, attrs, ngModelCtrl) {

      var regexp = null;

      if (scope.inputPattern !== undefined) {
        regexp = new RegExp(scope.inputPattern, "g");
      }

      if(!ngModelCtrl) {
        return;
      }

      ngModelCtrl.$parsers.push(function(val) {
        if (regexp) {
          var clean = val.replace(regexp, '');
          if (val !== clean) {
            ngModelCtrl.$setViewValue(clean);
            ngModelCtrl.$render();
          }
          return clean;
        }
        else {
          return val;
        }

      });

      element.bind('keypress', function(event) {
        if(event.keyCode === 32) {
          event.preventDefault();
        }
      });
    }
}}); </script>

Question 18

বেসিক এইচটিএমএল

<input type="number" />

বেসিক বুটস্ট্র্যাপ

<input class="form-control" type="number" value="42" id="my-id">