Angular 10数字输入指令在部分设备上无法允许逗号输入的问题

不同设备、键盘布局或输入法环境下，event.key的取值存在兼容性差异。例如部分虚拟键盘或特殊输入法中，输入逗号时event.key可能并非直接返回,字符，导致你的指令未明确允许逗号输入，进而被间接拦截。此外，仅依赖keydown事件无法覆盖所有输入场景（如粘贴、输入法候选词输入），也会引发异常。

以下是优化后的指令，通过兼容键位编码、兜底输入事件、限制小数分隔符数量等方式解决问题：

import { Directive, HostListener, ElementRef } from '@angular/core';

@Directive({
  selector: 'input[numbersOnly]',
})
export class NumberOnlyDirective {
  constructor(private el: ElementRef) {}

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    // 允许的字符和键位编码
    const allowedChars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', ','];
    const allowedKeyCodes = ['Digit0', 'Digit1', 'Digit2', 'Digit3', 'Digit4', 'Digit5', 'Digit6', 'Digit7', 'Digit8', 'Digit9', 'Comma'];
    // 允许的控制键（保证基础编辑功能）
    const controlKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Escape'];

    // 控制键直接放行
    if (controlKeys.includes(event.key)) return true;

    // 允许的字符或键位放行，同时限制单个逗号
    if (allowedChars.includes(event.key) || allowedKeyCodes.includes(event.code)) {
      if (event.key === ',' && this.el.nativeElement.value.includes(',')) {
        event.preventDefault();
        return false;
      }
      return true;
    }

    // 拦截所有非法输入
    event.preventDefault();
    return false;
  }

  @HostListener('input', ['$event'])
  onInput(event: InputEvent) {
    const input = this.el.nativeElement;
    let value = input.value;

    // 过滤非法字符，仅保留数字和逗号
    value = value.replace(/[^0-9,]/g, '');
    // 确保最多只有一个逗号
    const commaIndex = value.indexOf(',');
    if (commaIndex !== -1) {
      value = value.slice(0, commaIndex + 1) + value.slice(commaIndex + 1).replace(/,/g, '');
    }

    input.value = value;
    // 手动触发input事件同步ngModel
    input.dispatchEvent(new Event('input'));
  }

  @HostListener('paste', ['$event'])
  onPaste(event: ClipboardEvent) {
    event.preventDefault();
    const pasteContent = event.clipboardData?.getData('text') || '';
    let cleanedContent = pasteContent.replace(/[^0-9,]/g, '');

    // 处理粘贴内容中的多个逗号
    const commaIndex = cleanedContent.indexOf(',');
    if (commaIndex !== -1) {
      cleanedContent = cleanedContent.slice(0, commaIndex + 1) + cleanedContent.slice(commaIndex + 1).replace(/,/g, '');
    }

    // 插入清理后的内容到光标位置
    const input = this.el.nativeElement;
    const start = input.selectionStart;
    const end = input.selectionEnd;
    input.value = input.value.substring(0, start) + cleanedContent + input.value.substring(end);
    input.selectionStart = input.selectionEnd = start + cleanedContent.length;
    input.dispatchEvent(new Event('input'));
  }
}

1. 键位编码兼容：使用event.code判断键位（逗号键的编码固定为Comma），不受输入法或键盘布局影响，确保所有设备上逗号键都能被正确识别。
2. 兜底输入事件：新增input事件监听，无论用户通过何种方式输入（键盘、粘贴、输入法），都会自动过滤非法字符，保证输入值合规。
3. 限制单个逗号：实时检查并移除多余的逗号，避免出现多个小数分隔符的情况。
4. 保留基础编辑功能：明确允许退格、删除、箭头键等控制键，不影响用户正常编辑操作。

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