为何使用JavaScript移除HTML首字符后，前置下划线未消失？

原因 #

你遇到的问题核心是未阻止浏览器的默认输入行为。在Firefox中，即便目标div没有设置contenteditable="true"，当元素获得焦点后按下字符键，浏览器仍会默认将按下的字符插入到元素中。这就导致你的代码逻辑和浏览器默认行为发生叠加：

• 浏览器先主动修改div的文本内容，插入你按下的字符
• 你的代码又基于被修改后的内容再次加工，最终出现前置下划线与多余字符的叠加结果。

比如第一次输入"a"时：

1. 浏览器默认行为先把"a"插入div，原本的"_"变成"_a"
2. 你的代码获取到"a"，截取掉最后一个字符得到""，再拼接"a"和"_"，最终div内容变成"a"
   第二次输入"b"时，类似的叠加逻辑就导致了最终显示"ab"。

解决方案 #

在事件处理函数中添加evt.preventDefault()，阻止浏览器的默认输入行为，确保只有你的代码逻辑修改文本内容：

document.addEventListener("keydown", (evt) => {
  if (evt.keyCode >= 65 && evt.keyCode <= 90) {
    // 阻止浏览器默认输入行为，避免内容叠加
    evt.preventDefault();
    let command = document.getElementById("cmdInput").textContent;
    let str2 = command.substring(0, command.length - 1) + evt.key + "_";
    console.log(str2);
    document.getElementById("cmdInput").textContent = str2;
  }
});

修改后测试：输入"a"会得到"a_"，输入"b"后得到"ab_"，完全符合预期。

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