设置值后如何使撤消在 HTML 文本区域中起作用？

Question

我有一个 <textarea> 元素，我可以监听某些按键。就像用户键入 Tab 键一样，我会阻止更改焦点的默认操作并在正确的位置添加制表符。

问题是当用户按下我听的一个键时，撤消有点混乱。如何使撤消/重做功能起作用？我想过听 ctrl/cmd-z 和 ctrl/cmd-shift-z 按键，记录所有内容，并处理撤消/重做，但是编辑和上下文菜单选项不起作用......

您可以通过键入带有制表符的字母并回车然后尝试撤消和重做来查看：

const textarea = document.querySelector('textarea')
textarea.addEventListener('keydown', function (event) {
  if (event.key == "Tab") {
    event.preventDefault()
    const cursor = textarea.selectionStart
    textarea.value = textarea.value.slice(0, cursor) + '\t' + textarea.value.slice(textarea.selectionEnd)
    textarea.selectionStart = textarea.selectionEnd = cursor + 1
  } else if (event.key == "Enter") {
    event.preventDefault()
    const cursor = textarea.selectionStart
    textarea.value = textarea.value.slice(0, cursor) + '\n' + textarea.value.slice(textarea.selectionEnd)
    textarea.selectionStart = textarea.selectionEnd = cursor + 1
  }
})

<textarea cols="50" rows="20"></textarea>

Answer 1

我认为问题的核心在于 Javascript 和浏览器默认的撤销方法之间缺乏交互。使用 Javascript 将文本附加到 textarea 不会以任何方式告诉浏览器的“撤消”删除附加的文本，因为浏览器的“撤消”仅用于删除用户输入的文本，而不是 Javascript 输入的文本。

以您的代码为例。按下 Enter 后，您告诉 eventListener 阻止默认设置，这共同阻止 Enter 键将用户输入附加到文本区域。然后，您使用 Javascript 合成输入，浏览器的“撤消”不会跟踪该输入。

您可以通过使用Document.execCommand() 来克服这种缺乏交互的问题。您可以通过链接查看它的浏览器支持。

const textarea = document.querySelector('textarea');
textarea.addEventListener('keydown', function (event) {
    const cursor = textarea.selectionStart;
    if(event.key == "Tab"){
        event.preventDefault();
        document.execCommand("insertText", false, '\t');//appends a tab and makes the browser's default undo/redo aware and automatically moves cursor
    } else if (event.key == "Enter") {
        event.preventDefault();
        document.execCommand("insertText", false, '\n');
    }

});