时间戳

首页 > 解决方案 > Angular2输入在输入时只接受数字，但在复制粘贴时不接受

javascript - Angular2输入在输入时只接受数字，但在复制粘贴时不接受

问题描述

我在 Angular2 中创建了一个如下所示的输入字段，它应该只接受数字。

html

<input type="text" name="streetCode" ngModel [maxlength]="2" (keypress)="onlyNumber($event)">

打字员

onlyNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

上面的代码工作正常，只允许键盘输入数字，但问题是当我将某些字母字符复制粘贴到输入字段时，它允许使用字母。

更新1： 实际上当我说复制粘贴时，它是通过鼠标复制粘贴而不是通过键盘。

谁能帮我解决这个问题

更新 2

现在我已经修改了如下所示的代码，不知道这是否是正确的做法：

  onlyNumber(evt) {
    if (evt.type === 'paste') {
      let content = evt.clipboardData.getData('Text');
      if (isNaN(content)) {
        evt.preventDefault();
      }
    }
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
      evt.preventDefault();
    }
  }

HTML

<input type="text" name="streetCode" ngModel [maxlength]="2" (keypress)="onlyNumber($event)" (paste)="onlyNumber($event)">

标签： javascripthtmlangulartypescriptinput

解决方案

理论上，keydownandkeyup事件代表按键被按下或释放，而keypress事件代表一个字符被输入。该理论的实现在所有浏览器中并不相同。

所以我想建议是使用keydown/keyup事件而不是keypress如果你不想使用 type="number"而不是文本，也想听粘贴事件。

推荐阅读