Angular字符转换功能异常：输入非希伯来字符出现冗余重复输出

问题根源 #

• 每次keyup触发时，错误将整个输入框的完整内容而非当前单个按键字符追加到emailAddress，导致内容重复累积（比如输入r0556时，每一步都会把当前输入框的全部内容再加一遍）。
• 未实时同步转换结果到输入框，仅回车时才更新，中间过程输入框显示原始内容，而emailAddress在错误累加。
• 希伯来字符匹配逻辑错误：用整个输入框内容去匹配希伯来字符数组，无法正确识别单个希伯来字符。

修复方案 #

核心修改点 #

1. 通过event.key获取当前按下的单个字符，而非整个输入框内容。
2. 实时更新输入框内容，确保显示的是转换后的结果，同时同步维护emailAddress变量。
3. 处理回退键（Backspace），避免内容异常。
4. 修正希伯来字符匹配逻辑，针对单个字符进行转换。

修改后的完整代码 #

HTML 代码（无需修改）

<h1>נא הכנס כתובת מייל</h1>
<input (keyup)="getLetter($event)" (mouseover)="onComment()" (mouseleave)="offComment()" type="text">
<div id="comment">{{comment}}</div>
<button type="button" (click)="clickButton()">{{button}}</button>

TypeScript 代码

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-email-adress',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './email-adress.component.html',
  styleUrl: './email-adress.component.css'
})
export class emailAddressComponent {
  comment = "";
  onComment() {
    this.comment = "חובה למלא כתובת מייל"
  }
  offComment() {
    this.comment = "";
  }
  
  // 希伯来字符与对应英文映射（注意：原映射里最后一个英文是逗号，需确认是否为笔误）
  hebrewToEnglish = new Map([
    ['א', 't'], ['ב', 'c'], ['ג', 'd'], ['ד', 's'], ['ה', 'v'], ['ו', 'u'],
    ['ז', 'z'], ['ח', 'j'], ['ט', 'y'], ['י', 'h'], ['כ', 'f'], ['ל', 'k'],
    ['מ', 'n'], ['נ', 'b'], ['ס', 'x'], ['ע', 'g'], ['פ', 'p'], ['צ', 'm'],
    ['ק', 'e'], ['ר', 'r'], ['ש', 'a'], ['ת', ',']
  ]);
  
  emailAddress = "";

  getLetter(event: KeyboardEvent) {
    const inputElement = event.target as HTMLInputElement;
    const pressedKey = event.key;

    // 处理回退键：删除最后一个字符
    if (pressedKey === 'Backspace') {
      this.emailAddress = this.emailAddress.slice(0, -1);
      inputElement.value = this.emailAddress;
      return;
    }

    // 处理回车：触发提示并清空
    if (pressedKey === 'Enter') {
      alert("This email address: " + this.emailAddress);
      this.emailAddress = "";
      inputElement.value = "";
      return;
    }

    // 忽略功能键（如Shift、Ctrl等）
    if (pressedKey.length > 1) return;

    // 转换字符：如果是希伯来字符则替换，否则保留原字符
    const convertedChar = this.hebrewToEnglish.get(pressedKey) || pressedKey;
    this.emailAddress += convertedChar;
    
    // 实时更新输入框显示
    inputElement.value = this.emailAddress;
  }

  button = "@gmail.com";
  clickButton() {
    this.emailAddress += this.button;
    alert("כתובת המייל שנקלטה היא: " + this.emailAddress);
  }
}

额外说明 #

• 原代码中希伯来字符ת对应的英文是逗号（,），如果是笔误可以自行修改hebrewToEnglish映射表。
• 新增了功能键过滤，避免Shift、Ctrl等按键触发不必要的字符追加。
• 实时同步输入框内容与emailAddress变量，确保显示与内部存储一致。

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