为什么为input输入框实现方括号自动补全后，无法用backspace键删除自动添加的]

你遇到的现象是自动补全后的光标位置没有被主动控制，加上现有逻辑没有处理退格键的删除联动，最终导致的体验错位，完整的触发流程可以拆解为：

• 你手动输入[时，输入框初始值为[，此时浏览器默认把光标停在[的后面（位置索引为1，也就是单字符内容的末尾）。
• 触发oninput回调后，你直接把输入框的值整体替换为[]，全程没有修改光标位置。现代浏览器在这类场景下会保留之前的光标坐标，不会自动把光标移动到新字符串的末尾，所以最终光标会卡在[和]的中间，呈现[|]的状态（|代表光标）。
• 此时不同按键的行为完全符合浏览器的默认规则，和你感受到的现象完全匹配：
  • 按backspace（退格键）的默认行为是删除光标前方的字符：此时光标前方是你手动输入的[，所以第一下退格会直接删掉这个[，输入框的值瞬间变成只剩自动补的]，光标也会同步挪到这个孤立]的前面。因为此时输入框的值不再满足input.value === "["的判断条件，你的补全逻辑不会触发后续操作——你会发现这时候再按退格键根本删不掉这个]，因为光标在字符前方，退格键没有可以删除的前置字符。
  • 按delete（删除键）的默认行为是删除光标后方的字符：此时光标在[和]中间，后方刚好是自动添加的]，所以按delete可以直接删掉这个字符，也就出现了你感知到的“只有在末尾按delete才能删掉这个自动补的括号”的情况。

如果要做体验更顺畅的括号自动补全，通常还需要补充两个逻辑：

• 补全完成后主动确认光标位置，避免浏览器默认光标偏移
• 增加退格联动逻辑：当检测到光标相邻的前后两个字符是配对的括号时，按退格键直接同时删除两个括号，不会留下孤立的]

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