如何限制输入文本框仅以 Angular2 形式输入数字？

Posted 2023-03-13

【中文标题】如何限制输入文本框仅以 Angular2 形式输入数字？

【英文标题】：How to restrict input textbox to enter numbers only in Angular2 form?

【发布时间】：2017-05-07 09:11:53

【问题描述】：

我必须限制用户只能在 Angular2->form 的字段中输入数字 我有解决方案，但退格键在输入字段中不起作用 任何人都可以有适当的解决方案吗？

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

在按住事件时，它限制用户只能输入数字，但此代码的问题是退格键，tab 键不起作用。所以，此代码不符合我的预期...

【问题讨论】：

可能重复：***.com/questions/7295843/…

How to allow only numeric (0-9) in HTML inputbox using jQuery?的可能重复

我没有使用 jQuery。通过提供任何服务在 typescript-angular2 中是否有任何解决方案..

这与 Angular 无关。无论如何，不​​要从用户手中接管键盘，阻止按键工作，让他认为他的键盘坏了。使用标准 HTML5 技术（例如 type="number" 或 pattern）来控制和验证输入。这也将正确处理您的代码没有的情况，例如自动填充或将文本拖放到输入框中。

【参考方案1】：

我做了一个指令来阻止特定的输入，类似于在此处和其他帖子中发布的其他内容。我以this article 为基础，但做了一些更改以避免使用已弃用的keyCode 属性等。

我还取消了对允许的键盘命令的限制（包含Ctrl、Command、Shift 或 Alt 的任何键组合），因为它可能会导致意外限制（例如无法执行撤消/redo 命令）。

指令如下：

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>

您可以根据自己的需要进行更改。你可以check the list of available key codes here。

希望对你有帮助。

【参考方案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>

【参考方案3】：

使用html5标签怎么样？ <input type="number"> 所有浏览器都支持它。

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

【参考方案4】：

你也可以这样用

keyPress(event: any) 

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

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

【参考方案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>

【参考方案6】：

退格不起作用，因为：event.charCode 不会映射到退格键的数字之一 0-9。

您需要将退格列入白名单（即 keyCode = 8）。像这样的东西（在我的脑海中）：

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

【参考方案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);
 

【参考方案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 中有一个更好的库。