键入另一个字符时如何插入一个字符

Question

假设我有一个纯 HTML 文本区域。我想要做的是我希望能够在输入字符时插入不同的字符。例如，我想在将< 输入到文本区域时插入<>。另外，如果可能的话，我希望能够在< 和> 之间移动光标。

这就是我现在所拥有的。不过，它仅在光标位于末尾时才有效。

let editing = document.querySelector("#editing");

const handler = (event) => {
  if (editing.value.endsWith("<")) {
    editing.value += ">";
    editing.setSelectionRange(editing.selectionStart - 1, editing.selectionStart - 1)
  }
}

editing.addEventListener("propertychange", handler)
editing.addEventListener("input", handler)

<textarea name="editing" id="editing"></textarea>

Answer 1

有关非常相关的讨论，请参阅Use tab to indent in textarea，此答案基于该讨论。

下面的代码应该做你想做的事，通过捕获< 的keydown 事件并将其替换为插入<>（覆盖当前选择的任何内容）并将光标移动到< 之后：

const editing = document.querySelector("#editing");

editing.addEventListener('keydown', (e) => {
  if (e.key === '<') {
    e.preventDefault();
    const pos = editing.selectionStart;
    editing.value = editing.value.slice(0, pos) + '<>' +
      editing.value.slice(editing.selectionEnd);
    editing.selectionStart = editing.selectionEnd = pos + 1;
  }
});

不幸的是，这种方法也会破坏编辑器的撤消堆栈。在 Chrome 上，您可以使用document.execCommand('insertText', false, '<>') 模拟输入<>。不幸的是，Firefox 不支持此功能，因此它不是一个很好的解决方案。