angular2限制键盘响应，如：只接收数字键盘输入

最新推荐文章于 2020-03-25 16:05:08 发布

雨若雪汐

最新推荐文章于 2020-03-25 16:05:08 发布

阅读量4.2k

点赞数 1

本文链接：https://blog.csdn.net/yaomengzhi/article/details/53789079

版权

本文介绍了如何在Angular2应用中限制用户只能输入数字，包括通过设置type为number以及使用ng2双向绑定和事件监听的方法。由于某些方法对中文输入法无效，故存在一定的局限性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、type值为number

<input type="number" />

二、通过ng2双向绑定与事件方式实现

1、html代码：

<input type="text"
       #inputVars
       (keyup)="onKeyPress(inputVars.value)"
       (keydown)="onKeyDown($event)"
      [(ngModel)]="inputValue"/>

2、angular代码片段

inputValue: any;

onKeyPress(value: any) {
  if (value === '' || isUndefined(value) || value.length === 0) {
    this.inputValue = '';
    return;
  }
  const str: any[] = value.split('.');
  if (str && str.length === 2) {
    this.dotFlag = true;
    if (str[1] === '' && !isNaN(parseInt(str[0]))) {
      this.inputValue = value;
      return;
    } else {
      this.inputValue = checkIsFloat(value);
      return;
    }
  } else {
    this.dotFlag = false;
    this.inputValue = checkIsFloat(value);
    return;
  }

  function checkIsFloat(value: any) {
    const newValue = parseFloat(value);
    if (isNaN(newValue)) {
      return '';
    }
    return newValue;
  }

}
private dotFlag: boolean = false;
onKeyDown(event: any) {
  const keyCode = event.which || event.keyCode;

  if (keyCode === 190 && this.dotFlag) {
    this.dotFlag = true;
    event.returnValue = false;
    return;
  } else if (keyCode === 190) {
    this.dotFlag = true;
  }
  const specialkey = [8, 37, 39, 190].some((key) => key === keyCode);
  if ((keyCode >= 48 && keyCode <= 57 || specialkey)) {
    event.returnValue = true;
  } else {
    event.returnValue = false;
  }
}

/*以下方式弃用，对中文输入法无效*/

三、通过事件方式

1、html 代码：

<input type="text"  (keydown)="onKeyPress($event)" >

2、angular2 函数48=<keyCode<=57为数字，字母或者其他同理，对中文输入法无效（弃用）

onKeyPress(event:any){

  const keyCode = event.which || event.keyCode;

  const specialkey = [8, 37, 39, 190].some((key) => key === keyCode);
  if ((keyCode >= 48 && keyCode <= 57 || specialkey)) {
    event.returnValue = true;
  } else {
    event.returnValue = false;
  }

}