如何在设置值后在HTML textarea中进行撤消工作？

Question

我有一个<textarea>元素,我听从某些按键.就像用户键入Tab键一样,我会阻止更改焦点的默认操作,并将制表符添加到正确的位置.

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

您可以通过键入带有选项卡的字母进入,然后输入然后尝试撤消和重做:

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将文本附加到文本区域不会以任何方式告诉浏览器的“撤消”删除附加的文本，因为浏览器的“撤消”仅是为了删除用户输入的文本，而不是文本的Javascript输入。

以您的代码为例。按下Enter键后，您告诉eventListener阻止preventDefault，这将阻止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');
    }

});