如何禁用Edge和Chrome输入框中大写变音字母的自动转换（Angular）

在我的Angular应用中，Edge和Chrome浏览器会自动将大写变音字母转换为对应元音字母。比如输入ÄÜÖäüö时，输入框显示异常，但数据传递是正确的，我需要取消这个自动转换行为。

我已尝试以下方案，均无效：

• 输入框设置autocomplete="off"
• 输入框设置spellcheck="false"
• 在index.html中添加标签属性：<tag autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
• 修改浏览器语言设置
• 修改Windows 11操作系统语言设置

可尝试的解决方法 #

1. 指定输入模式
   给输入框添加inputmode="text"，明确告诉浏览器以纯文本模式处理输入，避免自动转换：

<input type="text" inputmode="text" />

2. 组合禁用属性
   使用更严谨的属性组合覆盖浏览器默认行为，注意autocomplete="none"比off在部分浏览器中效果更明确：

<input type="text" autocomplete="none" autocorrect="off" autocapitalize="off" spellcheck="false" inputmode="text" />

3. 自定义Angular指令强制保留字符
   创建自定义指令监听输入事件，还原被转换的字符：

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

@Directive({
  selector: '[preserveUmlauts]'
})
export class PreserveUmlautsDirective {
  @HostListener('input', ['$event'])
  onInput(event: InputEvent) {
    const inputEl = event.target as HTMLInputElement;
    const correctedValue = inputEl.value
      .replace(/A(?![Ää])/g, 'Ä')
      .replace(/U(?![Üü])/g, 'Ü')
      .replace(/O(?![Öö])/g, 'Ö');
    if (correctedValue !== inputEl.value) {
      inputEl.value = correctedValue;
      inputEl.dispatchEvent(new Event('input')); // 更新双向绑定值
    }
  }
}

使用时直接在输入框上添加指令：

<input type="text" preserveUmlauts [(ngModel)]="yourInputValue" />

4. 排查输入法/扩展干扰
   第三方输入法的自动修正功能、浏览器扩展都可能导致字符转换，尝试禁用输入法的自动替换，或临时关闭浏览器扩展排查问题。

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