Ion-input禁止特殊字符问题：Android端(keypress)事件失效

问题分析 #

之前的方案存在三个核心问题：

• ngModelChange是值绑定更新后触发，特殊字符会先显示再被替换，产生视觉闪烁
• 浏览器端的keypress事件在Android WebView中兼容性极差，无法生效
• 未处理光标位置和中文输入法场景，用户体验不佳

最优解决方案 #

利用Ionic封装的跨平台ionInput事件，配合输入法状态监听，实现实时过滤且无视觉闪烁：

1. 模板代码

<ion-input 
  [(ngModel)]="serial_number" 
  (ionInput)="onSerialInput($event)"
  (compositionstart)="onCompositionStart()"
  (compositionend)="onCompositionEnd($event)"
  #serialno 
  id="serialno"  
  class="cac-input"
></ion-input>

2. TypeScript逻辑

// 标记是否处于中文输入法输入状态
private isComposing = false;

// 中文输入法开始输入时触发
onCompositionStart() {
  this.isComposing = true;
}

// 中文输入法结束输入时触发，完成后统一过滤
onCompositionEnd(event: any) {
  this.isComposing = false;
  this.onSerialInput(event);
}

// 实时处理输入内容
onSerialInput(event: any) {
  // 中文输入过程中跳过过滤，避免干扰候选词
  if (this.isComposing) return;

  const inputElement = event.target as HTMLInputElement;
  const cursorPos = inputElement.selectionStart;
  const originalValue = inputElement.value;

  // 仅保留字母和数字，移除所有特殊字符
  const filteredValue = originalValue.replace(/[^a-zA-Z0-9]/g, '');

  if (filteredValue !== originalValue) {
    this.serial_number = filteredValue;
    // 恢复光标位置，避免过滤后光标跳到输入框末尾
    setTimeout(() => {
      const offset = originalValue.length - filteredValue.length;
      inputElement.setSelectionRange(cursorPos - offset, cursorPos - offset);
    }, 0);
  }
}

补充优化（可选） #

添加HTML5原生验证规则，在提交时强化校验提示：

<ion-input 
  ...
  pattern="[a-zA-Z0-9]*"
  required
  placeholder="请输入字母数字格式的序列号"
></ion-input>

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