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

Question

有没有办法编辑input或textarea使用javascript 的内容,并使用浏览器的"撤消"命令(例如ctrl-Z)可以撤消该更改？

我试图在选择的值中插入一个字符串,如"Foo {0} bar",如果用户选择了一个范围,则将所选范围插入到字符串中代替"{0} ".

例如,如果textarea包含"Example 1 2 3"并且光标位于"Example 1 | 2 3",那么该函数会将值更改为"Example 1Foo blah bar 2 3"(valueIfNothingSelected在这种情况下为"blah") .如果选择范围"1 2",则函数将改为将值更改为"示例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();
}

Answer 1

我找到了一个适用于/sf/answers/724191751/的解决方案

通过将"field.value = ..."行替换为:

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

...并将"field.focus()"移动到该行之前,我能够实现我想要的撤消/重做功能.