是否可以使用 javascript 编辑文本输入并添加到撤消堆栈？答案

【问题标题】：Is it possible to edit a text input with javascript and add to the Undo stack?是否可以使用 javascript 编辑文本输入并添加到撤消堆栈？
【发布时间】：2015-01-17 14:52:36
【问题描述】：

有没有办法用 javascript 编辑 input 或 textarea 的内容，并使用浏览器的“撤消”命令（例如 ctrl-Z）撤消该更改？

我正在尝试在选择的值中插入一个字符串，例如“Foo {0} bar”，如果用户选择了一个范围，则将所选范围插入到字符串中以代替“ {0}”。

例如，如果 textarea 包含“Example 1 2 3”并且光标位于“Example 1| 2 3”，则该函数会将值更改为“Example 1Foo blah bar 2 3”（valueIfNothingSelected 是“废话”在这种情况下）。如果选择了“1 2”范围，该函数会将值改为“Example Foo 1 2 bar 3”。

在 Chrome 中，我测试了这个功能，它完成了它应该做的事情，但我无法用undo 撤销更改。

function insertTextAtCursor(text, valueIfNothingSelected) {
    var field = $('textarea[name="task_log_description"]')[0];
    var startPos = field.selectionStart;
    var endPos = field.selectionEnd;
    var processedText;
    if (startPos == endPos) {
        processedText = text.replace('{0}', valueIfNothingSelected);
        field.value = field.value.substring(0, startPos) + processedText + field.value.substring(endPos, field.value.length);
        field.selectionStart = startPos + text.indexOf('{0}');
        field.selectionEnd = field.selectionStart + valueIfNothingSelected.length;
    } else {
        var selectedText = field.value.substring(startPos, endPos);
        processedText = text.replace('{0}', selectedText);
        field.value = field.value.substring(0, startPos) + processedText + field.value.substring(endPos, field.value.length);
        field.selectionStart = startPos + text.indexOf('{0}');
        field.selectionEnd = field.selectionStart + selectedText.length;
    }
    field.focus();
}

【问题讨论】：

ctrl-z 已经在 Ubuntu 14.04 上的 Chrome+Firefox 中为我工作。什么情况下它不适合你？
@Jack 扩展问题以包括我的 javascript 方法。无论出于何种原因，Ctrl-z 在使用此方法时不起作用。
Javascript textarea undo redo的可能重复

标签： javascript forms undo-redo

【解决方案1】：

我在https://stackoverflow.com/a/10345596/1021426找到了一个有效的解决方案

通过将“field.value = ...”行替换为：

document.execCommand("insertText", false, processedText);

...并将“field.focus()”移到该行之前，我能够实现我想要的撤消/重做功能。

【讨论】：

不要忘记接受这个答案，因为您解决了自己的问题。这样可以避免它显示为未答复。
从现在起 2 天后我才能接受自己的答案。
google 的工作方式很有趣，这是前面的结果，而不是您链接到的结果：D
由于bugzilla.mozilla.org/show_bug.cgi?id=1220696，这在 Firefox 中不起作用

【解决方案2】：

这是一个也适用于 Firefox 的解决方案，它是性能最高的解决方案，并在除 Firefox 之外的所有地方都提供撤消功能（这在本机中是不可能的）

// Solution
function insertText(textarea, text) {
    // https://stackoverflow.com/a/55174561/288906
    if (!document.execCommand('insertText', false, text)) {
        textarea.setRangeText(text);
    }
}

// Demo code to add text on click
const textarea = document.querySelector('textarea');
textarea.onclick = () => insertText(
  textarea,
  '@'
);

&lt;textarea&gt;Click in here to add text&lt;/textarea&gt;

我还将其打包为npm module，以提高跨浏览器的一致性。

【讨论】：

【解决方案3】：

这里是替换 <textarea> 内容的代码，而不是仅仅插入。

function setValueAndUpdateUndoStack(textarea, text) {
    // Must select all, so that the old text is deleted.
    textarea.focus();
    textarea.select();
    
    // https://stackoverflow.com/a/55174561/3480193
    if ( ! document.execCommand('insertText', false, text) ) {
        textarea.setRangeText(text);
    }
}

【讨论】：