Angular 11自定义指令导致输入框光标跳至文本末尾的问题解决

我来帮你搞定这个Safari专属的光标坑！首先得理清楚问题根源：你之前直接修改DOM的value属性，会打断浏览器原生的输入行为，尤其是number、email这类特殊输入类型——它们的selectionStart/selectionEnd属性在Safari里是只读的，直接调用setSelectionRange根本不生效，这就是光标跳末尾且拉不回来的原因。

下面给你一套不需要修改输入框类型的兼容方案，核心思路是优先通过Angular表单控件的模型层处理转换，减少直接DOM操作的干扰，同时针对不同输入类型做光标恢复的兼容处理：

import { Directive, ElementRef, HostListener, Renderer2, Optional, Self } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[convertToEnglishNumeral]',
})
export class ConvertToEnglishNumeralDirective {
  constructor(
    private elRef: ElementRef,
    private renderer: Renderer2,
    // 注入NgControl，绑定了ngModel的输入框都能通过这个访问表单模型
    @Optional() @Self() private ngControl: NgControl
  ) {}

  // 只保留input事件就够了——它能覆盖键盘输入、粘贴、输入法候选等所有输入场景
  @HostListener('input', ['$event'])
  onInput(event: InputEvent) {
    const inputElement = this.elRef.nativeElement;
    const originalValue = inputElement.value;
    const convertedValue = this.convertToEnglishNumeral(originalValue);

    // 只有当值确实发生变化时才处理，避免无限循环和无效操作
    if (convertedValue === originalValue) return;

    // 先记录当前光标位置
    const selectionStart = inputElement.selectionStart;
    const selectionEnd = inputElement.selectionEnd;

    if (this.ngControl) {
      // 绑定了ngModel的情况：通过模型层更新值，Angular会自动同步到视图
      this.ngControl.control.setValue(convertedValue, {
        emitEvent: false, // 阻止触发ngModelChange，避免循环
        emitModelToViewChange: true
      });
    } else {
      // 未绑定ngModel的情况：直接修改DOM（尽量少用，但兼容无表单场景）
      this.renderer.setProperty(inputElement, 'value', convertedValue);
    }

    // 延迟恢复光标位置——等Angular更新完视图后再操作，确保生效
    setTimeout(() => {
      this.restoreCursorPosition(inputElement, selectionStart, selectionEnd);
    }, 0);
  }

  private restoreCursorPosition(input: HTMLInputElement, start: number, end: number) {
    // 针对支持自由选光标的输入类型直接设置
    const supportedTypes = ['text', 'tel', 'search', 'url', 'password'];
    if (supportedTypes.includes(input.type)) {
      input.setSelectionRange(start, end);
      return;
    }

    // 处理number/email等特殊类型：Safari下这类输入框的selection属性只读，用聚焦+尝试设置的方式兼容
    input.focus();
    try {
      // 有些Safari版本对number输入框依然能生效，先尝试设置
      input.setSelectionRange(start, end);
    } catch (e) {
      // 若设置失败，至少保证光标不会强制跳转到末尾（用户可以手动调整，不会被锁死）
      console.warn('无法设置光标位置，已自动聚焦输入框', e);
    }
  }

  convertToEnglishNumeral(text: any): string {
    if (!text) return '';
    return text.toString().replace(/[\u0660-\u0669\u06f0-\u06f9]/g, (c) => {
      // 保留你的转换逻辑，高效且简洁
      return String(c.charCodeAt(0) & 0xf);
    });
  }
}

方案亮点说明： #

1. 模型优先原则：利用Angular的NgControl直接操作表单模型，让框架处理视图同步，避免直接修改DOM导致的原生行为冲突。
2. 精准事件监听：只使用input事件覆盖所有输入场景，去掉冗余的keyup/change等事件，减少重复触发。
3. 条件式处理：只有当值真正变化时才执行更新，避免无效操作和性能浪费。
4. 分层光标恢复：
   • 对支持自由选光标的输入类型直接用setSelectionRange恢复位置；
   • 对number/email这类特殊类型，先用focus保证输入框激活，再尝试设置光标，即使设置失败也不会让用户陷入无法修改的窘境。

额外注意事项： #

• 对于number类型输入，要确保转换后的值是合法数字（你的转换逻辑已经满足，因为只是替换阿拉伯/波斯数字为英文数字），否则浏览器会自动清空输入框。
• 如果你的项目里大量使用了响应式表单，这个方案能完美兼容，因为我们通过NgControl直接操作表单控件的值，不会破坏表单的状态同步。

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