如何限制輸入文本框只能以 Angular2 形式輸入數字？

Question

我必須限制用戶只能在 Angular2->form 的字段中輸入數字我有解決方案，但退格在輸入字段中不起作用任何人都可以有適當的解決方案嗎？

表單.html

<input (keypress)="keyPress($event)" minlength="8" maxlength="15" required />

form.component.ts

keyPress(event: any) {
    const pattern = /[0-9\+\-\ ]/;
    let inputChar = String.fromCharCode(event.charCode);
    // console.log(inputChar, e.charCode);
       if (!pattern.test(inputChar)) {
       // invalid character, prevent input
           event.preventDefault();
      }
 }

在 kepress 事件中，它限制用戶只能輸入數字，但此代碼的問題是退格鍵，Tab 鍵不起作用。所以，此代碼不符合我的預期...

Answer 1

我做了一個指令來防止特定的輸入，類似於在這里和其他帖子中發布的其他人。 我在本文中基於我的，但做了一些更改以避免使用已棄用的keyCode屬性等。

我還取消了對允許的鍵盤命令（包含Ctrl 、 Command 、 Shift或Alt任意組合鍵）的限制，因為它可能會導致意外限制（例如無法執行撤消/重做命令）。

這是指令：

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

@Directive({
  selector: '[inputDigitsOnly]',
})
export class InputDigitsOnlyDirective {
  private static readonly allowedKeyCodes = [
    "Backspace",
    "Delete",
    "Insert",
    "ArrowUp",
    "ArrowRight",
    "ArrowDown",
    "ArrowLeft",
    "Tab",
    "Home",
    "End",
    "Enter",
    "Digit1",
    "Digit2",
    "Digit3",
    "Digit4",
    "Digit5",
    "Digit6",
    "Digit7",
    "Digit8",
    "Digit9",
    "Digit0",
    "Numpad0",
    "Numpad1",
    "Numpad2",
    "Numpad3",
    "Numpad4",
    "Numpad5",
    "Numpad6",
    "Numpad7",
    "Numpad8",
    "Numpad9",
  ];

  @HostListener('keydown', ['$event'])
  onKeyDown(e: KeyboardEvent) {
    // This condition checks whether a keyboard control key was pressed.
    // I've left this 'open' on purpose, because I don't want to restrict which commands
    // can be executed in the browser. For example, It wouldn't make sense for me to prevent
    // a find command (Ctrl + F or Command + F) just for having the focus on the input with
    // this directive.
    const isCommandExecution = e.ctrlKey || e.metaKey || e.shiftKey || e.altKey;
    const isKeyAllowed = InputDigitsOnlyDirective.allowedKeyCodes.indexOf(e.code) !== -1;

    if (!isCommandExecution && !isKeyAllowed) {
      e.preventDefault();
      return;  // let it happen, don't do anything
    }
  }
}

然后你只需要在輸入中添加指令：

<input type="text" inputDigitsOnly>

您可以更改它以滿足您的需要。 您可以在此處查看可用密鑰代碼列表。

希望能幫助到你。

Answer 2

您可以通過以下方式使用正則表達式來實現：

 var numbersOnly = document.getElementById("numbersOnly"); numbersOnly.onkeyup = function myFunction() { numbersOnly.value = numbersOnly.value.replace(/[^0-9]/g, ''); };

 <input id="numbersOnly" minlength="8" maxlength="15" required>

Answer 3

如何使用 html5 標簽？ <input type="number">
所有瀏覽器都支持它。

https://www.w3schools.com/html/html_form_input_types.asp

Answer 4

你也可以用這種方式

keyPress(event: any) {

        const pattern = /[0-9\+\-\ ]/;
        let inputChar = String.fromCharCode(event.charCode);

            if (!pattern.test(inputChar) && event.charCode != '0') {
                event.preventDefault();
            }
    }

Answer 5

我創建了一個指令，只允許你輸入數字。

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


@Directive({
   selector: 'input[app-numeric-field]'
})
export class NumericValidatorDirective implements OnInit {
  @Input('app-numeric-field') maxLength: string;

  constructor(private elementRef: ElementRef,private _renderer: Renderer) {}

  ngOnInit(): void {
     this._renderer.setElementAttribute(this.elementRef.nativeElement, 'maxlength', this.maxLength);
  }

  @HostListener('keydown', ['$event']) onKeyDown(event) {
     let e = <KeyboardEvent> event;
        if ([46, 8, 9, 27, 13, 110].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 matInput app-numeric-field>

Answer 6

Backspace 將不起作用，因為： event.charCode不會映射到退格鍵的數字0-9之一。

您需要將退格鍵列入白名單（即 keyCode = 8）。 像這樣的東西（在我的頭頂上）：

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

Answer 7

我的答案是：- form.html：

form.component.ts

restrictNumeric = function (e) {
     var input;
     if (e.metaKey || e.ctrlKey) {
        return true;
     }
     if (e.which === 32) {
        return false;
     }
     if (e.which === 0) {
        return true;
     }
     if (e.which < 33) {
        return true;
     }
     input = String.fromCharCode(e.which);
     return !!/[\d\s]/.test(input);
 }

Answer 8

請不要再使用 String.fromCharCode(event.keyCode)，它被標記為已棄用的MDN ，它似乎在 Firefox 58 中無法正常工作。一個簡單的功能，在 Chrome 和 Firefox 上測試過：

onKeypress(event: any) {
  const keyChar = event.key;

  let allowCharacter: boolean;
  if (keyChar === "-" && event.target.selectionStart !== 0) {
    allowCharacter = false;
  }
  else if (
    keyChar === "Tab" ||
    keyChar === "Enter" ||
    keyChar === "Backspace" ||
    keyChar === "ArrowLeft" ||
    keyChar === "ArrowRight" ||
    keyChar === "Delete") {
    allowCharacter = true;
  }
  else {
    allowCharacter = (keyChar >= '0' && keyChar <= '9');
  }

  if (!allowCharacter) {
    event.preventDefault();
  }
}

我也對這段代碼不滿意，希望在 Angular 中有一個更好的庫。