HTML 输入 - 以编程方式设置输入值时撤消历史丢失

Question

我有一个 HTML 输入。当用户输入时，我设置了 'input' 事件来处理将输入更新为用户输入内容的过滤版本（以及更新 selectionStart 和 selectionEnd 以实现流畅的 UX）。这种情况不断发生，以产生适当的效果。

然而，我注意到的是，每当 JS 通过 input.value = '...'; 设置输入的值时，输入的撤消历史似乎消失了。也就是说，在聚焦时按 Ctrl-Z 不再退回到之前的状态。

是否有任何方法可以提供输入的自定义撤消历史记录，或者以其他方式防止它在丢失历史记录的同时仍然更改其值？

这是我的问题的一个最小示例：
在顶部输入（基本在每个字符之间添加句点）后，Ctrl-Z 不会撤消。

<body>
    <input type="text" id="textbox" placeholder="No undo"/><br/>
    <input type="text" id="textbox2" placeholder="Undo"/>
    <script>
        var tbx = document.getElementById("textbox");
        tbx.addEventListener('input', () => {
            tbx.value = tbx.value + '.'
        });
    </script>
</body>

Answer 1

您可以尝试将输入的先前值存储在变量中，然后在 [=] 中监听 Ctrl + Z 组合键12=] 附加到输入的事件侦听器。当它被触发时，您可以将输入的值设置为之前存储的值。

btn.addEventListener('click', function(){
  savePrevInput(input.value)
  input.value = "Hello World!";
})

var prevInput;

function savePrevInput(input){
  prevInput = input;
}

input.addEventListener("keydown", function(e){
  if(e.ctrlKey && e.keyCode == 90){
    input.value = prevInput;
    input.selectionStart = prevInput.length;
  }
})

<input id="input"/>

<button id="btn">Change</button>

HTML 输入 - 以编程方式设置输入值时撤消历史丢失

HTML Input - Undo history lost when setting input value programmatically

javascript

undo

html-input