时间戳

首页 > 解决方案 > HTML 输入 - 以编程方式设置输入值时撤消历史记录丢失

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

问题描述

我有一个 HTML 输入。当用户输入时，我设置了“输入”事件来处理将输入更新为用户输入内容的过滤版本（以及更新 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>

标签： javascriptundohtml-input

解决方案

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

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>

推荐阅读