Angular 7中keypress事件在移动端Chrome浏览器失效问题

问题根源 #

keypress事件在移动端Chrome的软键盘场景下支持性不佳，无法可靠捕获输入操作，导致数字和长度限制逻辑失效。

解决方案 #

改用input事件替代keypress，结合HTML5原生属性增强限制，同时调整TypeScript逻辑适配输入后的内容修正：

修改后的HTML代码

<div class="col-12 col-md-6">
  <div class="form__group btm">
    <label class="form__label">numidentity :</label>
    <input 
      class="form__input validation-field" 
      [(ngModel)]="numidentity"  
      (input)="handleIdentityInput($event)"  
      placeholder=""
      type="tel"
      maxlength="4"
      pattern="[0-9]*" >
  </div>
</div>

• type="tel"：唤起移动端数字软键盘，提升用户体验
• maxlength="4"：原生限制输入长度，作为第一层拦截
• pattern="[0-9]*"：辅助验证输入格式，配合表单校验

修改后的TypeScript代码

handleIdentityInput(event: any) {
  // 过滤非数字字符
  let filteredValue = event.target.value.replace(/[^0-9]/g, '');
  // 截断到4位长度
  filteredValue = filteredValue.slice(0, 4);
  // 同步到ngModel绑定的变量
  this.numidentity = filteredValue;
}

逻辑说明 #

1. input事件能捕获所有输入场景（软键盘输入、粘贴、语音输入等），覆盖移动端的各种操作方式
2. 通过正则过滤非数字字符，确保输入内容仅为数字
3. 截断超出4位的内容，严格限制长度
4. 直接同步修正后的值到numidentity，保证双向绑定的数据一致性

内容的提问来源于stack exchange，提问作者franco