কৌণিক 2 - কেবল সংখ্যা গ্রহণ করতে ইনপুট ক্ষেত্র

Question 1

কৌণিক 2 এ, আমি কীভাবে কোনও ইনপুট ক্ষেত্রের (পাঠ্যবক্স) মুখোশ দিতে পারি যে এটি কেবলমাত্র সংখ্যা গ্রহণ করে বর্ণানুক্রমিক অক্ষরগুলি নয়?

আমি নিম্নলিখিত HTML ইনপুট আছে:

<input 
  type="text" 
  *ngSwitchDefault 
  class="form-control" 
  (change)="onInputChange()" 
  [(ngModel)]="config.Value" 
  (focus)="handleFocus($event)" 
  (blur)="handleBlur($event)"
/>

উপরের ইনপুটটি জেনেরিক পাঠ্য ইনপুট যা একটি সাধারণ পাঠ্য ক্ষেত্র বা একটি সংখ্যা ক্ষেত্র হিসাবে ব্যবহৃত হতে পারে, উদাহরণস্বরূপ, বছরটি দেখানোর জন্য।

কৌণিক 2 ব্যবহার করে, আমি কীভাবে একই ইনপুট নিয়ন্ত্রণ ব্যবহার করতে পারি এবং এই ক্ষেত্রটিতে কোনও ধরণের ফিল্টার / মাস্ক প্রয়োগ করতে পারি, যেমন এটি কেবল সংখ্যাকে গ্রহণ করে?

আমি এটি অর্জন করতে পারে বিভিন্ন উপায় কি?

দ্রষ্টব্য: আমার কেবল টেক্সটবক্স ব্যবহার করে এবং ইনপুট নম্বর প্রকারটি ব্যবহার না করে এটি অর্জন করা দরকার।

Question 2

আপনি কৌনিক 2 নির্দেশাবলী ব্যবহার করতে পারেন। Plunkr

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

@Directive({
  selector: '[OnlyNumber]'
})
export class OnlyNumber {

  constructor(private el: ElementRef) { }

  @Input() OnlyNumber: boolean;

  @HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent> event;
    if (this.OnlyNumber) {
      if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
        // Allow: Ctrl+A
        (e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
        // Allow: Ctrl+C
        (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
        // Allow: Ctrl+V
        (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
        // Allow: Ctrl+X
        (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
        // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
          // let it happen, don't do anything
          return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
      }
  }
}

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

<input OnlyNumber="true" />

আপনার মডিউল ঘোষণার অ্যারে আপনার নির্দেশিকা লিখতে ভুলবেন না।

রেজেক্স ব্যবহার করে আপনার এখনও ক্রিয়ামূলক কী প্রয়োজন হবে

export class OnlyNumber {

  regexStr = '^[0-9]*$';
  constructor(private el: ElementRef) { }

  @Input() OnlyNumber: boolean;

  @HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent> event;
    if (this.OnlyNumber) {
        if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
        // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) ||
        // Allow: Ctrl+C
        (e.keyCode == 67 && e.ctrlKey === true) ||
        // Allow: Ctrl+V
        (e.keyCode == 86 && e.ctrlKey === true) ||
        // Allow: Ctrl+X
        (e.keyCode == 88 && e.ctrlKey === true) ||
        // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
          // let it happen, don't do anything
          return;
        }
      let ch = String.fromCharCode(e.keyCode);
      let regEx =  new RegExp(this.regexStr);    
      if(regEx.test(ch))
        return;
      else
         e.preventDefault();
      }
  }
}

Question 3

আপনি যদি কোন নির্দেশিকা না চান

https://stackblitz.com/edit/numeric-only

घटकে html

<input (keypress)="numberOnly($event)" type="text">

घटक.ts

export class AppComponent {

  numberOnly(event): boolean {
    const charCode = (event.which) ? event.which : event.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
      return false;
    }
    return true;

  }
}

Question 4

আমি জানি এটি একটি পুরানো প্রশ্ন, তবে এটি যেহেতু একটি সাধারণ ছন্দবদ্ধতা তাই আমি যে পরিবর্তনগুলি করেছি তা ভাগ করে নিতে চাই:

কাস্টম দশমিক বিভাজক (পয়েন্ট বা কমা)
কেবল পূর্ণসংখ্যা বা পূর্ণসংখ্যা এবং দশমিকের জন্য সমর্থন
ইতিবাচক সংখ্যা বা ধনাত্মক এবং andণাত্মক জন্য সমর্থন
বৈধ বিয়োগ চিহ্ন (-) শুরুতে
মাউস আটকানোতে সমর্থন ( https://caniuse.com/#feat=clipboard যদিও কিছু সীমাবদ্ধতার সাথে )
ম্যাক কমান্ড কী জন্য সমর্থন

".33" এবং "33." এর মতো স্ট্রিংগুলি প্রতিস্থাপন করুন সঠিক সংস্করণগুলির জন্য: 0.33 এবং 33.0

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

@Directive({ selector: '[NumbersOnly]' })
export class NumbersOnly { 

    @Input() allowDecimals: boolean = true;
    @Input() allowSign: boolean = false;
    @Input() decimalSeparator: string = '.';

    previousValue: string = '';

    // --------------------------------------
    //  Regular expressions
    integerUnsigned: string = '^[0-9]*$';
    integerSigned: string = '^-?[0-9]+$';
    decimalUnsigned: string = '^[0-9]+(.[0-9]+)?$';
    decimalSigned: string = '^-?[0-9]+(.[0-9]+)?$';

    /**
     * Class constructor
     * @param hostElement
     */
    constructor(private hostElement: ElementRef) { }

    /**
     * Event handler for host's change event
     * @param e
     */
    @HostListener('change', ['$event']) onChange(e) {

            this.validateValue(this.hostElement.nativeElement.value);
}

/**
 * Event handler for host's paste event
 * @param e
 */
@HostListener('paste', ['$event']) onPaste(e) {

    // get and validate data from clipboard
    let value = e.clipboardData.getData('text/plain');
    this.validateValue(value);
    e.preventDefault();
}

/**
 * Event handler for host's keydown event
 * @param event
 */
@HostListener('keydown', ['$event']) onKeyDown(e: KeyboardEvent) {

    let cursorPosition: number = e.target['selectionStart'];
    let originalValue: string = e.target['value'];
    let key: string = this.getName(e);
    let controlOrCommand = (e.ctrlKey === true || e.metaKey === true);
    let signExists = originalValue.includes('-');
    let separatorExists = originalValue.includes(this.decimalSeparator);

    // allowed keys apart from numeric characters
    let allowedKeys = [
        'Backspace', 'ArrowLeft', 'ArrowRight', 'Escape', 'Tab'
    ];

    // when decimals are allowed, add
    // decimal separator to allowed codes when
    // its position is not close to the the sign (-. and .-)
    let separatorIsCloseToSign = (signExists && cursorPosition <= 1);
    if (this.allowDecimals && !separatorIsCloseToSign && !separatorExists) {

        if (this.decimalSeparator == '.')
            allowedKeys.push('.');
        else
            allowedKeys.push(',');
    }

    // when minus sign is allowed, add its
    // key to allowed key only when the
    // cursor is in the first position, and
    // first character is different from
    // decimal separator
    let firstCharacterIsSeparator = (originalValue.charAt(0) != this.decimalSeparator);
    if (this.allowSign && !signExists &&
        firstCharacterIsSeparator && cursorPosition == 0) {

        allowedKeys.push('-');
    }

    // allow some non-numeric characters
    if (allowedKeys.indexOf(key) != -1 ||
        // Allow: Ctrl+A and Command+A
        (key == 'a' && controlOrCommand) ||
        // Allow: Ctrl+C and Command+C
        (key == 'c' && controlOrCommand) ||
        // Allow: Ctrl+V and Command+V
        (key == 'v' && controlOrCommand) ||
        // Allow: Ctrl+X and Command+X
        (key == 'x' && controlOrCommand)) {
        // let it happen, don't do anything
        return;
    }

    // save value before keydown event
    this.previousValue = originalValue;

    // allow number characters only
    let isNumber = (new RegExp(this.integerUnsigned)).test(key);
    if (isNumber) return; else e.preventDefault();
}

/**
 * Test whether value is a valid number or not
 * @param value
 */
validateValue(value: string): void {

    // choose the appropiate regular expression
    let regex: string;
    if (!this.allowDecimals && !this.allowSign) regex = this.integerUnsigned;
    if (!this.allowDecimals && this.allowSign) regex = this.integerSigned;
    if (this.allowDecimals && !this.allowSign) regex = this.decimalUnsigned;
    if (this.allowDecimals &&  this.allowSign) regex = this.decimalSigned;

    // when a numbers begins with a decimal separator,
    // fix it adding a zero in the beginning
    let firstCharacter = value.charAt(0);
    if (firstCharacter == this.decimalSeparator)
        value = 0 + value;

    // when a numbers ends with a decimal separator,
    // fix it adding a zero in the end
    let lastCharacter = value.charAt(value.length-1);
    if (lastCharacter == this.decimalSeparator)
        value = value + 0;

    // test number with regular expression, when
    // number is invalid, replace it with a zero
    let valid: boolean = (new RegExp(regex)).test(value);
    this.hostElement.nativeElement['value'] = valid ? value : 0;
}

/**
 * Get key's name
 * @param e
 */
getName(e): string {

    if (e.key) {

        return e.key;

    } else {

        // for old browsers
        if (e.keyCode && String.fromCharCode) {

            switch (e.keyCode) {
                case   8: return 'Backspace';
                case   9: return 'Tab';
                case  27: return 'Escape';
                case  37: return 'ArrowLeft';
                case  39: return 'ArrowRight';
                case 188: return ',';
                case 190: return '.';
                case 109: return '-'; // minus in numbpad
                case 173: return '-'; // minus in alphabet keyboard in firefox
                case 189: return '-'; // minus in alphabet keyboard in chrome
                default: return String.fromCharCode(e.keyCode);
            }
        }
    }
}

ব্যবহার:

 <input NumbersOnly
        [allowDecimals]="true"
        [allowSign]="true"
        type="text">

Question 5

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

আমি যা প্রস্তাব করছি তা হ'ল সর্বশেষতম ওয়েব মান সহ একটি সরলীকৃত এবং টু ডেট সংস্করণ। এটি লক্ষ্য করা গুরুত্বপূর্ণ যে ইভেন্ট.কি কোডটি ওয়েব মান থেকে সরানো হয়েছে এবং ভবিষ্যতে ব্রাউজার আপডেটগুলি এটিকে আর সমর্থন করে না। Https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode দেখুন

তদ্ব্যতীত, পদ্ধতি

String.fromCharCode(e.keyCode);

ব্যবহারকারীর কীবোর্ডে চিহ্নিত হিসাবে প্রত্যাশিত অক্ষরে ব্যবহারকারী মানচিত্রের দ্বারা চাপানো কী-কোড সম্পর্কিত কী কোডটি গ্যারান্টি দেয় না, যেহেতু বিভিন্ন কীবোর্ড কনফিগারেশনের ফলে একটি নির্দিষ্ট কীকোডে বিভিন্ন অক্ষর দেখা দেবে। এটি ব্যবহার করে এমন বাগগুলি প্রবর্তন করা হবে যা সনাক্ত করা কঠিন এবং নির্দিষ্ট ব্যবহারকারীর জন্য কার্যকারিতা সহজেই ভেঙে দিতে পারে। বরং আমি ইভেন্ট.কি ব্যবহারের প্রস্তাব দিচ্ছি, এখানে ডক্স দেখুন https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

তদুপরি, আমরা কেবল এটিই চাই যে ফলাফল আউটপুটটি একটি বৈধ দশমিক। এর অর্থ হ'ল 1, 11.2, 5000.2341234 সংখ্যাটি গ্রহণ করা উচিত তবে 1.1.2 মানটি গ্রহণ করা উচিত নয়।

নোট করুন যে আমার সমাধানে আমি কাটা, অনুলিপি এবং কার্যকারিতা বাদ দিচ্ছি কারণ এটি বাগের জন্য উইন্ডোগুলি খোলায়, বিশেষত যখন লোকেরা সংশ্লিষ্ট ক্ষেত্রে অযাচিত পাঠ্য আটকে দেয়। এর জন্য একটি কীআপ হ্যান্ডলারের একটি ক্লিনআপ প্রক্রিয়া প্রয়োজন; যা এই থ্রেডের সুযোগ নয়।

আমি প্রস্তাব করছি সমাধান এখানে।

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

@Directive({
    selector: '[myNumberOnly]'
})
export class NumberOnlyDirective {
    // Allow decimal numbers. The \. is only allowed once to occur
    private regex: RegExp = new RegExp(/^[0-9]+(\.[0-9]*){0,1}$/g);

    // Allow key codes for special events. Reflect :
    // Backspace, tab, end, home
    private specialKeys: Array<string> = [ 'Backspace', 'Tab', 'End', 'Home' ];

    constructor(private el: ElementRef) {
    }

    @HostListener('keydown', [ '$event' ])
    onKeyDown(event: KeyboardEvent) {
        // Allow Backspace, tab, end, and home keys
        if (this.specialKeys.indexOf(event.key) !== -1) {
            return;
        }

        // Do not use event.keycode this is deprecated.
        // See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
        let current: string = this.el.nativeElement.value;
        // We need this because the current value on the DOM element
        // is not yet updated with the value from this event
        let next: string = current.concat(event.key);
        if (next && !String(next).match(this.regex)) {
            event.preventDefault();
        }
    }
}

Question 6

আরও সংক্ষিপ্ত সমাধান এই নির্দেশ চেষ্টা করুন।

আপনি যদি রিঅ্যাকটিভ ফর্মগুলি ব্যবহার করেন তবে এটি ব্যবহার করা যায়।

export class NumberOnlyDirective {
  private el: NgControl;

  constructor(private ngControl: NgControl) {
    this.el = ngControl;
  }

  // Listen for the input event to also handle copy and paste.
  @HostListener('input', ['$event.target.value'])
  onInput(value: string) {
    // Use NgControl patchValue to prevent the issue on validation
    this.el.control.patchValue(value.replace(/[^0-9]/g, ''));
  }
}

এটি আপনার ইনপুটগুলিতে এটি ব্যবহার করুন:

<input matInput formControlName="aNumberField" numberOnly>

Question 7

<input type="text" (keypress)="keyPress($event)">


  keyPress(event: any) {
    const pattern = /[0-9\+\-\ ]/;

    let inputChar = String.fromCharCode(event.charCode);
    if (event.keyCode != 8 && !pattern.test(inputChar)) {
      event.preventDefault();
    }
  }

Question 8

পরিবর্তে পাঠ্যটি আপনার টাইপ = "সংখ্যা" ব্যবহার করা উচিত। আপনি সর্বোচ্চ এবং ন্যূনতম সংখ্যাও নির্দিষ্ট করতে পারেন

<input type="number" name="quantity" min="1" max="5">

Question 9

আপনি এটি এইভাবে অর্জন করতে পারেন

<input type="text" pInputText (keypress)="onlyNumberKey($event)" maxlength="3"> 

onlyNumberKey(event) {
    return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57;
}

//for Decimal you can use this as

onlyDecimalNumberKey(event) {
    let charCode = (event.which) ? event.which : event.keyCode;
    if (charCode != 46 && charCode > 31
        && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

আশা করি এটা তোমাকে সাহায্য করবে.

Question 10

আপনি রিজেক্স ব্যবহার করতে পারেন:

<input type="text" (keypress)="numericOnly($event)">

numericOnly(event): boolean {    
    let patt = /^([0-9])$/;
    let result = patt.test(event.key);
    return result;
}

Question 11

ব্যবহার করুন patternনিচের মত ইনপুট জন্য অ্যাট্রিবিউট:

<input type="text" pattern="[0-9]+" >

Question 12

আমি জানি এটির অনেক উত্তর রয়েছে তবে আমার নিম্নলিখিতটি হ্যান্ডেল করা দরকার (যা উত্তরগুলির কোনওটিতেই পুরোপুরি সমর্থন করে বলে মনে হয় না):

মাল্টি-লাইনের জন্য বিকল্প সহ টেক্সারিয়ার সমর্থন
দশমিক বা নেতিবাচক সংখ্যা
প্রতি লাইনে সর্বাধিক দৈর্ঘ্য
ক্রস ব্রাউজার সমর্থন (ক্রোম, এজ, আইই 11)
কাট / পেস্ট পরিচালনা এবং ইভেন্টগুলি পরিচালনা করা

সমাধানটি আমাকে এই জাতীয় একটি টেক্সেরিয়া সংজ্ঞায়িত করতে দেয়:

<textarea class="form-control" [(ngModel)]="this.myModelVariable"
    appOnlyNumbers [allowNegative]="true" [allowMultiLine]="true" 
    [allowDecimal]="true" [maxLength]="10"
    placeholder="Enter values (one per line)"></textarea>

বা আমি যদি কেবল ধনাত্মক পূর্ণসংখ্যা চাই

<textarea class="form-control" [(ngModel)]="this.myModelVariable"
    appOnlyNumbers [allowMultiLine]="true" [maxLength]="9"
    placeholder="Enter values (one per line)"></textarea>

আমার নির্দেশটি এখানে:

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

@Directive({
  selector: '[appOnlyNumbers]'
})
export class OnlyNumbersDirective {
  constructor(private el: ElementRef) { }

  @Input() allowMultiLine: boolean = false;
  @Input() allowNegative: boolean = false;
  @Input() allowDecimal: boolean = false;
  @Input() maxLength: number = 0;
  regex: RegExp;

  @HostListener('keypress', ['$event'])
  onKeyPress(event: KeyboardEvent) {
    this.validate(event, event.key === 'Enter' ? '\n' : event.key);
  }

  @HostListener('paste', ['$event'])
  onPaste(event: Event) {
    const pastedText = (<any>window).clipboardData && (<any>window).clipboardData.getData('Text') // If IE, use window
      || <ClipboardEvent>event && (<ClipboardEvent>event).clipboardData.getData('text/plain'); // Non-IE browsers
    this.validate(event, pastedText);
  }

  @HostListener('cut', ['$event'])
  onCut(event: Event) {
    this.validate(event, '');
  }

  validate(event: Event, text: string) {
    const txtInput = this.el.nativeElement;
    const newValue = (txtInput.value.substring(0, txtInput.selectionStart)
      + text + txtInput.value.substring(txtInput.selectionEnd));
    if (!this.regex) {
      this.regex = <RegExp>eval('/^'
        + (this.allowNegative ? '-?' : '')
        + (this.allowDecimal ? '((\\d+\\.?)|(\\.?))\\d*' : '\\d*')
        + '$/g');
    }
    var lines = this.allowMultiLine ? newValue.split('\n') : [newValue];
    for (let line of lines) {
      let lineText = line.replace('\r', '');
      if (this.maxLength && lineText.length > this.maxLength || !lineText.match(this.regex)) {
        event.preventDefault();
        return;
      }
    }
  }

}

Question 13

এটি সম্পাদন করতে, আমি এইভাবে অন ইনপুট পদ্ধতিতে একটি ফাংশন আবদ্ধ করেছি:

(input)="stripText(infoForm.get('uin'))

এখানে আমার ফর্মের উদাহরণ রয়েছে:

<form [formGroup]="infoForm" (submit)="next()" class="ui form">
    <input type="text" formControlName="uin" name="uin" id="uin" (input)="stripText(infoForm.get('uin'))" required/>
</form>

তারপরে আমি আমার উপাদানগুলিতে নিম্নলিখিত ফাংশনটি যুক্ত করেছি:

  stripText(control: FormControl) {
   control.setValue(control.value.replace(/[^0-9]/g, ''));
  }

এই রেজেক্স /[^0-9]/gএমন কোনও কিছুর সন্ধান করে যা কোনও সংখ্যা নয় এবং .replaceআমি এটি ব্যবহার করে কিছুই দ্বারা প্রতিস্থাপন করা হবে। সুতরাং যখন কোনও ব্যবহারকারী একটি সংখ্যা নয় এমন একটি অক্ষর টাইপ করার চেষ্টা করেন (এই ক্ষেত্রে এমন একটি অক্ষর যা নয় এর মধ্য দিয়ে শূন্য হয় না), এটি প্রদর্শিত হয় যেন পাঠ্য বাক্সে কিছুই ঘটে না।

Question 14

জিনপল এ এবং rdanielmurphy ধন্যবাদ। আমি কেবল ইনপুট ফিল্ডটিকে কেবল সংখ্যায় সীমাবদ্ধ করার জন্য আমার নিজস্ব কাস্টম নির্দেশনা তৈরি করেছি। সর্বাধিক এবং ন্যূনতম ইনপুট বৈশিষ্ট্যগুলিও যুক্ত করা হয়েছে। কৌণিক 7 এও কাজ করবে।

কৌণিক

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

@Directive({
  selector: '[appNumberOnly]'
})
export class NumberOnlyDirective {
  // Allow decimal numbers. The \. is only allowed once to occur
  private regex: RegExp = new RegExp(/^[0-9]+(\.[0-9]*){0,1}$/g);

  // Allow key codes for special events. Reflect :
  // Backspace, tab, end, home
  private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home'];
  constructor(private el: ElementRef) { }

  @Input() maxlength: number;
  @Input() min: number;
  @Input() max: number;

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    // Allow Backspace, tab, end, and home keys
    if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
    }

    // Do not use event.keycode this is deprecated.
    // See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
    const current: string = this.el.nativeElement.value;

    // We need this because the current value on the DOM element
    // is not yet updated with the value from this event
    const next: string = current.concat(event.key);
    if (next && !String(next).match(this.regex) || (this.maxlength && next.length > this.maxlength) ||
      (this.min && +next < this.min) ||
      (this.max && +next >= this.max)) {
      event.preventDefault();
    }
  }

  @HostListener('paste', ['$event']) onPaste(event) {
    // Don't allow pasted text that contains non-numerics
    const pastedText = (event.originalEvent || event).clipboardData.getData('text/plain');

    if (pastedText) {
      const regEx = new RegExp('^[0-9]*$');
      if (!regEx.test(pastedText) || (this.maxlength && pastedText.length > this.maxlength) ||
        (this.min && +pastedText < this.min) ||
        (this.max && +pastedText >= this.max)) {
        event.preventDefault();
      }
    }
  }

}

এইচটিএমএল

<input type="text" class="text-area" [(ngModel)]="itemName" maxlength="3" appNumberOnly />

Question 15

সেরা উত্তরের জন্য একটি আধুনিক পদ্ধতির (e.keyCode ছাড়াই)

@HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent> event;
    if (['Delete', 'Backspace', 'Tab', 'Escape', 'Enter', 'NumLock', 'ArrowLeft', 'ArrowRight', 'End', 'Home', '.'].indexOf(e.key) !== -1 ||
      // Allow: Ctrl+A
      (e.key === 'a' && (e.ctrlKey || e.metaKey)) ||
      // Allow: Ctrl+C
      (e.key === 'c' && (e.ctrlKey || e.metaKey)) ||
      // Allow: Ctrl+V
      (e.key === 'v' && (e.ctrlKey || e.metaKey)) ||
      // Allow: Ctrl+X
      (e.key === 'x' && (e.ctrlKey || e.metaKey))) {
      // let it happen, don't do anything
      return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].indexOf(e.key) === -1)) {
      e.preventDefault();
    }
}

Question 16

স্বেচ্ছাসেবী RegExp নির্দেশ

এখানে ছোট্ট নির্দেশনা যা অবৈধ মান টাইপ করতে স্বেচ্ছাসেবী regexp এবং ব্লক ব্যবহারকারী ব্যবহার করে

কোড স্নিপেট দেখান

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

@Directive({selector: '[allowedRegExp]'})
export class AllowedRegExpDirective {
    
  @Input() allowedRegExp: string;
  
  @HostListener('keydown', ['$event']) onKeyDown(event: any) {
    // case: selected text (by mouse) - replace it
    let s= event.target.selectionStart;
    let e= event.target.selectionEnd;
    let k= event.target.value + event.key;
        
    if(s!=e) {
      k= event.target.value
      k= k.slice(0,s) + event.key + k.slice(e,k.length);
    }

    // case: special characters (ignore)
    if(['ArrowLeft','ArrowRight','ArrowUp','ArroDown','Backspace','Tab','Alt'
       'Shift','Control','Enter','Delete','Meta'].includes(event.key)) return;

    // case: normal situation - chceck regexp
    let re = new RegExp(this.allowedRegExp);
        
    if(!re.test(k)) event.preventDefault();
  }
}

স্নিপেট প্রসারিত করুন

মাস্ক করতে শুধুমাত্র সংখ্যা ব্যবহার করুন

<input [allowedRegExp]="'^[0-9]*$'" type="text" ... >

Question 17

কেবল একটি নির্দেশিকা তৈরি করুন এবং নীচে হোস্টলিস্টার যুক্ত করুন:

@HostListener('input', ['$event'])
    onInput(event: Event) {
        this.elementRef.nativeElement.value = (<HTMLInputElement>event.currentTarget).value.replace(/[^0-9]/g, '');
    }

খালি দিয়ে অবৈধ পাঠ্য প্রতিস্থাপন করুন। সমস্ত কী এবং কী সংমিশ্রণগুলি এখন IE9 পর্যন্ত সমস্ত ব্রাউজার জুড়ে কাজ করবে।

Question 18

বৈধ মোবাইল নম্বর প্যাটার্নের জন্য প্যাটার্ন ('^ ((\ + 91 -?) | 0)? [0-9] {10} $'))

পাঠ্য বাক্সের প্যাটার্ন থেকে কেবলমাত্র সংখ্যার গ্রহণের প্যাটার্ন ('[0-9] *')

নির্দিষ্ট সংখ্যা সহ শুধুমাত্র সংখ্যা গ্রহণের জন্য প্যাটার উদাহরণ: পিনকোড। প্যাটার্ন ('^ [0-9] {5} $')

Question 19

<input oninput="this.value=this.value.replace(/[^0-9]/g,'')"

বা: 2. এইচটিএমএল ফাইলে:

 <input [(ngModel)]="data" (keypress)="stripText($event)"
     class="form-control">

টিএস ফাইলটিতে:

stripText(event) {
const seperator  = '^([0-9])';
const maskSeperator =  new RegExp(seperator , 'g');  
let result =maskSeperator.test(event.key);   return result;   }

এই 2 সমাধান কাজ করে

Question 20

আমি উপরের দিকনির্দেশক এবং প্রয়োগকৃত ন্যূনতম, সর্বোচ্চ, সর্বোচ্চতাতে কিছু পরিবর্তন করেছি।

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

@Directive({
  selector: '[numberOnly]'
})
export class NumbersOnlyDirective {

  private regex: RegExp = new RegExp(/[0-9]/g);
  // Allow key codes for special events. Reflect :
  private specialKeys: Array<number> = [46, 8, 9, 27, 13, 110, 190, 35, 36, 37, 39];
  // Backspace, tab, end, home

  @Input() maxlength: number;
  @Input() min: number;
  @Input() max: number;

  constructor(private el: ElementRef) {
  }
    @HostListener('keydown', ['$event'])
    onKeyDown(event: KeyboardEvent) {
    e = <KeyboardEvent>event;

if ((
  (this.specialKeys.indexOf(event.which) > -1) ||
  // to allow backspace, enter, escape, arrows  
  (e.which == 65 && e.ctrlKey == true) ||
  // Allow: Ctrl+C        
  (e.which == 67 && e.ctrlKey == true) ||
  // Allow: Ctrl+X
  (e.which == 88 && e.ctrlKey == true))) {
  return;
} else if (// to allow numbers  
  (e.which >= 48 && e.which <= 57) ||
  // to allow numpad number  
  (event.which >= 96 && event.which <= 105)) { }
else {
      event.preventDefault();
    }
    let current: string = this.el.nativeElement.value;

    let next: string = current.concat(event.key);
    if ((next && !String(next).match(this.regex)) ||
      (this.maxlength && next.length > this.maxlength) ||
      (this.min && +next < this.min) ||
      (this.max && +next >= this.max)) {
      event.preventDefault();
    }

  }
}

Question 21

কাস্টিং কারণ এটি 00345 এর মতো শীর্ষস্থানীয় 0 এর সাথেও কাজ করে

@Directive({
  selector: '[appOnlyDigits]'
})
export class AppOnlyDigitsDirective {
  @HostListener('input', ['$event'])
  onKeyDown(ev: KeyboardEvent) {
    const input = ev.target as HTMLInputElement;
    input.value = String(input.value.replace(/\D+/g, ''));
  }
}

Question 22

@omeralper এর উত্তর থেকে। আমি কিছুটা পরিবর্তন করেছি যা পিরিয়ড এস্কিই গ্রহণ করবে না (কীকোড 110,190)। এবং let ch = (e.key) ব্যবহার করুন; আপনি যখন ভাষা পরিবর্তন করেন তখন নিয়মিত ভাবের সাথে তুলনা করতে (যেমন থাই বা জাপানি ভাষা) এটি সেই ভাষার চরিত্রকে গ্রহণ করবে না

export class OnlyNumber {

  regexStr = '^[0-9]*$';
  constructor(private el: ElementRef) { }

  @Input() OnlyNumber: boolean;

  @HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent> event;
    if (this.OnlyNumber) {
      // console.log(event, this.OnlyNumber);
        if ([46, 8, 9, 27, 13].indexOf(e.keyCode) !== -1) {
          return;
        }
      let ch = (e.key);
      let regEx =  new RegExp(this.regexStr);   
      if(regEx.test(ch))
        return;
      else
         e.preventDefault();
    }
  }
}

এই সাহায্য আশা করি :)

Question 23

আপনি এই ভ্যালিডেটরটি তৈরি করতে এবং আপনার উপাদানটিতে এটি আমদানি করতে পারেন।
মূলত ফর্ম ইনপুট স্ট্রিংকে বৈধতা দেয়:

কোন বিন্দু আছে তা পরীক্ষা করুন
স্ট্রিংকে সংখ্যায় রূপান্তর করে
চেক একটি পূর্ণসংখ্যা হয়
চেক শূন্যের চেয়ে বড়

আপনার প্রকল্পে এটি বাস্তবায়নের জন্য:

আপনার অ্যাপ্লিকেশন ফোল্ডারে প্রস্তাবিত পথ: src / app / validators / number.omotator.ts
আপনার উপাদান আমদানি করুন

import { NumberValidator } from '../../validators/number.validator';
এটি ফর্ম নিয়ন্ত্রণে যুক্ত করুন
inputNumber: ['', [NumberValidator.isInteger]],
আপনি যদি অবৈধ চরিত্রটি দেখাতে না চান, তবে ইনপুটটিতে একটি আবদ্ধ (change)="deleteCharIfInvalid()"করুন, যদি form.get('inputNumber').hasError('isInteger')হয় তবে trueঅন্তর্ভুক্ত শেষ চরটি মুছুন।

// FILE: src/app/validators/number.validator.ts

import { FormControl } from '@angular/forms';

export interface ValidationResult {
    [key: string]: boolean;
}

export class NumberValidator {

    public static isInteger(control: FormControl): ValidationResult {
        // check if string has a dot
        let hasDot:boolean = control.value.indexOf('.') >= 0 ? true : false;
        // convert string to number
        let number:number = Math.floor(control.value);
        // get result of isInteger()
        let integer:boolean = Number.isInteger(number);
        // validate conditions 
        let valid:boolean = !hasDot && integer && number>0;
        console.log('isInteger > valid', hasDot, number, valid);
        if (!valid) {
            return { isInteger: true };
        }
        return null;
    }        
}

Question 24

পেস্ট করা সামগ্রী স্যানিটাইজিংয়ের জন্য সমর্থন সহ:

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

@Directive({
  selector: '[NumbersOnly]'
})
export class NumbersOnlyDirective {

    DIGITS_REGEXP =  new RegExp(/\D/g);
    constructor(private el: ElementRef) { 

        // Sanatize clipboard by removing any non-numeric input after pasting
        this.el.nativeElement.onpaste = (e:any) => {
            e.preventDefault();
            let text;
            let clp = (e.originalEvent || e).clipboardData;
            if (clp === undefined || clp === null) {
                text = (<any>window).clipboardData.getData('text') || '';
                if (text !== '') {
                    text = text.replace(this.DIGITS_REGEXP, '');
                    if (window.getSelection) {
                        let newNode = document.createElement('span');
                        newNode.innerHTML = text;
                        window.getSelection().getRangeAt(0).insertNode(newNode);
                    } else {
                        (<any>window).selection.createRange().pasteHTML(text);
                    }
                }
            } else {
                text = clp.getData('text/plain') || '';
                if (text !== '') {
                    text = text.replace(this.DIGITS_REGEXP, '');
                    document.execCommand('insertText', false, text);
                }
            }
        };
    }

  @HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent> event;
    if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
      // Allow: Ctrl+A
      (e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
      // Allow: Ctrl+C
      (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
      // Allow: Ctrl+V
      (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
      // Allow: Ctrl+X
      (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
      // Allow: home, end, left, right
      (e.keyCode >= 35 && e.keyCode <= 39)) {
        // let it happen, don't do anything
        return;
      }
      // Ensure that it is a number and stop the keypress
      if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
          e.preventDefault();
      }
    }

}

Question 25

এখানে সহজ একটি: কীডাউন ইভেন্টের সরল নির্দেশনাটি এটি চাবির দৈর্ঘ্য এক এবং চাবির কোনও সংখ্যা নয় preventDefault()এবং এটি সেই চরটিকে রেন্ডার করে না cks

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

@Directive({
    selector: '[numbersOnly]'
})
export class NumbersOnlyDirective {
    @HostListener('keydown', ['$event'])
    keyDownEvent(event: KeyboardEvent) {
        if (event.key.length === 1 && (event.which < 48 || event.which > 57)) {
            event.preventDefault();
        }
    }

}

এইচটিএমএল:

<input type="text" [(ngModel)]="numModel" numbersOnly />

সীমাবদ্ধতা: এটি মাউস ব্যবহার করে আটকানো মঞ্জুরি দেয় যেভাবে অন্যান্য চর গ্রহণ করবে। এড়ানোর জন্য আপনি নির্দেশকে এবং ইনপুট হিসাবে মডেলটি পাস করতে পারেনngOnChage সেই মডেলটির মানটি কেবল সংখ্যায় পরিবর্তন করতে পারবেন:

নীচের মত:

সম্পাদনা: মডেলটির পরিবর্তন সনাক্ত করতে এবং ইনপুটটির মান আপডেট করতে কোড যুক্ত করা হয়েছে

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

@Directive({
    selector: '[numbersOnly]'
})
export class NumbersOnlyDirective implements OnChanges {

    @Input() numbersOnly: any;

    constructor(private el: ElementRef) {}

    @HostListener('keydown', ['$event'])
    keyDownEvent(event: KeyboardEvent) {
        // Add other conditions if need to allow ctr+c || ctr+v
        if (event.key.length === 1 && (event.which < 48 || event.which > 57)) {
            event.preventDefault();
        }
    }

    ngOnChanges(changes) {
        if (changes.numbersOnly) {
            this.el.nativeElement.value = this.el.nativeElement.value.replace(/[^0-9]/g, '');
        }
    }

}

এইচটিএমএল:

<input type="text" [(ngModel)]="numModel" [numbersOnly]="numModel" />

Question 26

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


    //only-digits
    @Directive({
      selector: '[only-digits]'
    })
    export class OnlyDigits {

      constructor(public el: ElementRef) {

        this.el.nativeElement.onkeypress = (evt) => {
          if (evt.which < 48 || evt.which > 57) {
            evt.preventDefault();
          }
        };

      }
    }

দিকনির্দেশক এটি করার সর্বোত্তম উপায়

Question 27

fromCharCode নামপ্যাড '1' টিপানোর সময় 'a' ফেরত দেয় যাতে এই মেথয়েড এড়ানো উচিত

(প্রশাসক: যথারীতি মতামত দিতে পারেনি)

Question 28

আমি অনুলিপি / আটকানো পরিচালনা সম্পর্কে অনেক মন্তব্য দেখেছি।

@ বাড়ির উত্তর থেকে পিগির পিছনে, আপনি অনুলিপি / আটকানো পরিচালনা করার একমাত্র সংখ্যা নির্দেশিকায় একটি পেস্ট ইভেন্ট হ্যান্ডলার যুক্ত করতে পারেন:

 @HostListener('paste', ['$event']) onPaste(event) {
  // Don't allow pasted text that contains non-numerics
  var pastedText = (event.originalEvent || event).clipboardData.getData('text/plain');

  if (pastedText) {
    var regEx = new RegExp('^[0-9]*$');
    if (!regEx.test(pastedText)) {
      event.preventDefault();
    }
}

এটি কেবলমাত্র লিখিত সংখ্যা হিসাবে যদি বিষয়বস্তু কেবল টেক্সটবক্সে অনুলিপি করা এবং আটকানো যায়। এটাই সহজ সমাধান। অ-সংখ্যাগুলি অপসারণ করতে ক্লিপবোর্ডের বিষয়বস্তু পরিবর্তন করা আরও অনেক জটিল এবং এটির পক্ষে এটি উপযুক্ত নাও হতে পারে।

আইই থেকে আটকানো পাঠ্য পেতে আপনি নিম্নলিখিতটি ব্যবহার করতে পারেন:

window.clipboardData.getData('Text');

Question 29

আপনি যদি প্রাইমং এবং অ্যাঙ্গুলার 6 বা তার বেশি ব্যবহার করেন তবে পি-ইনপুটমাস্ক উপাদান রয়েছে। এটি আলফা টাইপিং এবং নেতিবাচক মানগুলি প্রতিরোধ করে https://www.primefaces.org/primeng/#/inputmask

Question 30

শুধু লিখতে যথেষ্ট সহজ হবে না

onlyNumbers(event) {
if(isNaN(event.target.value * 1)) {
 console.log("Not a number")
} else {
  console.log("Number")
}

}

Question 31

আপনি এমন একটি নির্দেশিকাও তৈরি করতে পারেন যা কন্ট্রোলভ্যালুঅ্যাক্সেসর ইন্টারফেসকে প্রয়োগ করে ( https://angular.io/api/forms/ControlValueAccessor ) ।

এখানে কাজের উদাহরণ দেখুন: https://stackblitz.com/edit/angular-input-field-to-accept-only-numbers

আপনি 'ইনপুট' ইভেন্টটি শুনতে পারেন এবং কীকোডগুলি পরীক্ষা করার দরকার নেই। এটি কপি এবং পেস্ট সমর্থন করে এবং কন্ট্রোলভ্যালুএ্যাকসেসর ইন্টারফেসের কারণে কৌণিক ফর্মগুলি API এর সাথে দুর্দান্তভাবে সংহত করে।

নির্দেশিকা:

@Directive({
    ...
    selector: '[onlyNumber]'
})
export class OnlyNumberDirective implements ControlValueAccessor {
private onChange: (val: string) => void;
...
private value: string;

constructor(
    private elementRef: ElementRef,
    private renderer: Renderer2
) {
}

...

@HostListener('input', ['$event.target.value'])
onInputChange(value: string) {
    const filteredValue: string = filterValue(value);
    this.updateTextInput(filteredValue, this.value !== filteredValue);
}

private updateTextInput(value, propagateChange) {
    this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
    if (propagateChange) {
        this.onChange(value);
    }
    this.value = value;
}

// ControlValueAccessor Interface
...

registerOnChange(fn: any): void {
    this.onChange = fn;
}

writeValue(value: string): void {
    value = value ? String(value) : '';
    this.updateTextInput(value, false);
}
}


function filterValue(value): string {
    return value.replace(/[^0-9]*/g, '');
}

ব্যবহার:

<input name="number" type="text" onlyNumber [(ngModel)]="someNumber">