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

我必须限制用户只在Angular2->form的字段中输入数字 我有解决方案，但退格在输入字段中不起作用 有人能找到合适的解决办法吗

form.html

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

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

---

在kepress事件中，它限制用户只输入数字，但此代码的问题是退格，制表键不起作用。因此，此代码不符合我的预期…

退格将不起作用，因为：

事件。charCode

不会映射到退格键的某个数字

0-9

您需要将退格白名单（即keyCode=8）。类似这样的事情（在我脑子里）：

我的答案是：- form.html：

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

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

restrictNumeric=函数（e）{
var输入；
if（e.metaKey | | e.ctrlKey）{
返回true；
}
如果（e.which==32）{
返回false；
}
如果（e.which==0）{
返回true；
}
如果（如<33）{
返回true；
}
输入=String.fromCharCode（e.which）；
返回！！/[\d\s]/.test（输入）；
}

使用regex可以通过以下方式实现：

var numbersOnly=document.getElementById（“numbersOnly”）；
numbersOnly.onkeyup=函数myFunction（）{
numbersOnly.value=numbersOnly.value.replace（/[^0-9]/g'）；
};
使用html5标签怎么样？


所有浏览器都支持它

你也可以用这种方法

keyPress(event: any) {

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

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

请不要再使用String.fromCharCode（event.keyCode），它被标记为已弃用，并且在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();
  }
}

onKeypress（事件：任意）{
const keyChar=event.key；
让allowCharacter:布尔值；
if（keyChar==“-”&&event.target.selectionStart！==0）{
allowCharacter=false；
}
否则如果(
keyChar==“选项卡”||
keyChar==“输入”||
keyChar==“退格”||
keyChar==“箭头左”||
keyChar==“箭头右键”||
keyChar==“删除”）{
allowCharacter=true；
}
否则{
allowCharacter=（keyChar>='0'&&keyChar我创建了一个只允许您键入数字的指令

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

import{Directive，ElementRef，HostListener，Input，OnInit，Renderer}来自“@angular/core”；
@指示({
选择器：“输入[应用程序数字字段]”
})
导出类NumericValidator指令实现OnInit{
@输入（'app-numeric-field'）最大长度：字符串；
构造函数（private elementRef:elementRef，private _renderer:renderer）{}
ngOnInit（）：void{
this.u renderer.setElementAttribute（this.elementRef.nativeElement，'maxlength'，this.maxlength）；
}
@HostListener（'keydown'，['$event']）onKeyDown（event）{
设e=事件；
如果（[46,8,9,27,13,110].indexOf（e.keyCode）！=-1||
//允许：Ctrl+A
（e.keyCode===65&（e.ctrlKey | | e.metaKey））||
//允许：Ctrl+C
（e.keyCode===67&（e.ctrlKey | | e.metaKey））||
//允许：Ctrl+V
（e.keyCode===86&（e.ctrlKey | | e.metaKey））||
//允许：Ctrl+X
（e.keyCode===88&（e.ctrlKey | | e.metaKey））||
//允许：起始、结束、左、右
（e.keyCode>=35&&e.keyCode我做了一个指令来阻止特定的输入，类似于在这里和其他帖子中发布的其他输入。我基于我的，但做了一些更改，以避免使用不推荐的
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>



你可以改变它来满足你的需要，你可以

希望有帮助。
可能重复：可能重复我没有使用jQuery。typescript-angular2中有没有通过提供任何服务来解决问题的方法。这与Angular无关。无论如何，不要从用户手中接管键盘，阻止按键工作，让他认为键盘坏了。使用标准的HTML5技术，例如h作为
type=“number”
，或
模式来控制和验证输入。这也将正确处理代码无法处理的情况，例如自动填充或将文本拖放到输入框中。