Angular2 - ช่องป้อนข้อมูลเพื่อยอมรับเฉพาะตัวเลข

Question 1

ใน Angular 2 ฉันจะปิดบังช่องป้อนข้อมูล (กล่องข้อความ) เพื่อให้รับเฉพาะตัวเลขไม่ใช่ตัวอักษรได้อย่างไร

ฉันมีอินพุต HTML ต่อไปนี้:

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

อินพุตด้านบนเป็นอินพุตข้อความทั่วไปซึ่งอาจใช้เป็นฟิลด์ข้อความธรรมดาหรือฟิลด์ตัวเลขตัวอย่างเช่นเพื่อแสดงปี

การใช้ Angular 2 ฉันจะใช้ตัวควบคุมอินพุตเดียวกันและใช้ตัวกรอง / มาสก์บางประเภทในฟิลด์นี้ได้อย่างไรเพื่อให้ยอมรับเฉพาะตัวเลข

วิธีต่างๆที่ฉันสามารถทำได้คืออะไร?

หมายเหตุ: ฉันต้องการบรรลุสิ่งนี้โดยใช้กล่องข้อความเท่านั้นและไม่ได้ใช้ประเภทหมายเลขอินพุต

Question 2

คุณสามารถใช้คำสั่ง angular2 พลันคร

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

อย่าลืมเขียนคำสั่งของคุณในอาร์เรย์การประกาศของโมดูลของคุณ

เมื่อใช้ regex คุณจะต้องใช้คีย์ที่ใช้งานได้

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

ใน component.html

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

ใน component.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

ฉันรู้ว่านี่เป็นคำถามเก่า แต่เนื่องจากนี่เป็นเรื่องสนุกทั่วไปฉันจึงต้องการแบ่งปันการปรับเปลี่ยนที่ฉันทำ:

ตัวคั่นทศนิยมที่กำหนดเอง (จุดหรือลูกน้ำ)
รองรับจำนวนเต็มเท่านั้นหรือจำนวนเต็มและทศนิยม
รองรับเฉพาะจำนวนบวกหรือบวกและลบ
ตรวจสอบเครื่องหมายลบ (-) อยู่ในจุดเริ่มต้น
รองรับการวางเมาส์ (มีข้อ จำกัด บางประการแม้ว่าhttps://caniuse.com/#feat=clipboard )
รองรับปุ่มคำสั่ง Mac

แทนที่สตริงเช่น ".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

ฉันต้องการสร้างคำตอบที่ได้รับจาก @omeralper ซึ่งในความคิดของฉันเป็นรากฐานที่ดีสำหรับการแก้ปัญหาที่มั่นคง

สิ่งที่ฉันเสนอคือเวอร์ชันที่เรียบง่ายและทันสมัยพร้อมมาตรฐานเว็บล่าสุด สิ่งสำคัญคือต้องทราบว่า event.keycode ถูกลบออกจากมาตรฐานของเว็บและการอัปเดตเบราว์เซอร์ในอนาคตอาจไม่รองรับอีกต่อไป ดูhttps://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

นอกจากนี้วิธีการ

String.fromCharCode(e.keyCode);

ไม่รับประกันว่า keyCode ที่เกี่ยวข้องกับคีย์ที่กดโดยผู้ใช้จะจับคู่กับตัวอักษรที่คาดไว้ตามที่ระบุบนแป้นพิมพ์ของผู้ใช้เนื่องจากการกำหนดค่าแป้นพิมพ์ที่แตกต่างกันจะส่งผลให้คีย์โค้ดเฉพาะอักขระต่างกัน การใช้สิ่งนี้จะแนะนำจุดบกพร่องที่ยากต่อการระบุและสามารถทำลายฟังก์ชันการทำงานสำหรับผู้ใช้บางรายได้อย่างง่ายดาย แต่ฉันกำลังเสนอการใช้ event.key ดูเอกสารที่นี่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

โซลูชันที่รัดกุมยิ่งขึ้น ลองใช้คำสั่งนี้

สามารถใช้ได้หากคุณใช้ ReactiveForms

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

คุณต้องใช้ type = "number" แทนข้อความ คุณยังสามารถระบุจำนวนสูงสุดและต่ำสุดได้

<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

คุณสามารถใช้ regex:

<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

ฉันรู้ว่านี่มีคำตอบมากมาย แต่ฉันจำเป็นต้องจัดการสิ่งต่อไปนี้ (ซึ่งดูเหมือนว่าไม่มีคำตอบใดที่จะสนับสนุนอย่างเต็มที่):

รองรับ textarea พร้อมตัวเลือกสำหรับหลายบรรทัด
ทศนิยมหรือจำนวนลบ
ความยาวสูงสุดต่อบรรทัด
รองรับข้ามเบราว์เซอร์ (Chrome, Edge, IE 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

เพื่อให้บรรลุเป้าหมายนี้ฉันผูกฟังก์ชันกับเมธอด onInput ดังนี้:

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

regex นี้/[^0-9]/gค้นหาสิ่งที่ไม่ใช่ตัวเลขและ.replaceฉันตั้งค่าให้แทนที่โดยไม่มีอะไร ดังนั้นเมื่อผู้ใช้พยายามพิมพ์อักขระที่ไม่ใช่ตัวเลข (ในกรณีนี้คืออักขระที่ไม่ใช่ศูนย์ถึงเก้า) ดูเหมือนว่าไม่มีอะไรเกิดขึ้นในกล่องข้อความ

Question 14

ขอบคุณ JeanPaul A. และ 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();
      }
    }
  }

}

HTML

<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 ด้านล่าง:

@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] *')

รูปแบบสำหรับยอมรับเฉพาะหมายเลขที่มีหมายเลขเฉพาะเช่น: Pincode รูปแบบ ('^ [0-9] {5} $')

Question 19

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

หรือ: 2. ในไฟล์ HTML:

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

ในไฟล์ ts:

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

2 วิธีนี้ใช้ได้ผล

Question 20

ฉันได้ทำการแก้ไขบางอย่างในคำสั่งข้างต้นและใช้งาน min, max, maxlength

   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

แคสต์เพราะทำงานร่วมกับ 0 นำหน้าเช่น 00345

@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 ฉันเปลี่ยนแปลงเล็กน้อยที่ไม่ยอมรับช่วงเวลา ascii (รหัสคีย์ 110,190) และใช้ให้ 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

คุณสามารถสร้าง Validator นี้และนำเข้าในคอมโพเนนต์ของคุณ
โดยทั่วไปตรวจสอบสตริงอินพุตแบบฟอร์ม:

ตรวจสอบว่าไม่มีจุด
แปลงสตริงเป็นตัวเลข
ตรวจสอบเป็นจำนวนเต็ม
ตรวจสอบมากกว่าศูนย์

ในการนำไปใช้ในโครงการของคุณ:

เส้นทางที่แนะนำในโฟลเดอร์แอปของคุณ: src / app / validators / number.validator.ts
นำเข้าในส่วนประกอบของคุณ

import { NumberValidator } from '../../validators/number.validator';
เพิ่มลงในตัวควบคุมฟอร์ม
inputNumber: ['', [NumberValidator.isInteger]],
หากคุณไม่ต้องการแสดงถ่านที่ไม่ถูกต้องให้ผูก a (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()และจะไม่แสดงผลอักขระนั้น

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

}

HTML:

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

}

HTML:

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

      }
    }

Directive ก็เป็นวิธีที่ดีที่สุดเช่นกัน

Question 27

fromCharCode จะคืนค่า 'a' เมื่อกดบน numpad '1' ดังนั้นจึงควรหลีกเลี่ยงเมทิลนี้

(แอดมิน: ไม่สามารถแสดงความคิดเห็นได้ตามปกติ)

Question 28

ฉันเห็นความคิดเห็นมากมายเกี่ยวกับการจัดการการคัดลอก / วาง

หากต้องการปิดคำตอบของ @omeralper คุณสามารถเพิ่มตัวจัดการเหตุการณ์การวางลงในคำสั่ง onlyNumber เพื่อจัดการการคัดลอก / วาง:

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

วิธีนี้จะอนุญาตให้คัดลอกและวางเนื้อหาลงในกล่องข้อความเท่านั้นหากเป็นตัวเลข นั่นเป็นทางออกที่ง่ายที่สุด การเปลี่ยนเนื้อหาของคลิปบอร์ดเพื่อลบสิ่งที่ไม่ใช่ตัวเลขนั้นซับซ้อนกว่ามากและอาจไม่คุ้มค่า

ในการวางข้อความจาก IE คุณสามารถใช้สิ่งต่อไปนี้:

window.clipboardData.getData('Text');

Question 29

หากคุณใช้ primeng และ Angular 6 ขึ้นไปจะมีคอมโพเนนต์ p-inputMask ป้องกันการพิมพ์อัลฟาและค่าลบ 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

คุณยังสามารถสร้างคำสั่งที่ใช้อินเทอร์เฟซ ControlValueAccessor ( https://angular.io/api/forms/ControlValueAccessor )

ดูตัวอย่างการทำงานที่นี่: https://stackblitz.com/edit/angular-input-field-to-accept-only-numbers

คุณสามารถฟังเหตุการณ์ 'อินพุต' และไม่จำเป็นต้องตรวจสอบรหัสคีย์ รองรับการคัดลอกและวางและผสานรวมอย่างดีกับ Angular Forms API เนื่องจากอินเทอร์เฟซ ControlValueAccessor

คำสั่ง:

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