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

问题描述 投票：0回答：2

我有一个 HTML 输入。当用户在其中输入内容时，我设置了“输入”事件来处理将输入更新为用户输入内容的过滤版本（以及更新选择开始和选择结束以获得流畅的用户体验）。为了达到适当的效果，这种情况会不断发生。

但是，我注意到，每当 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>

javascript undo html-input
2个回答
0
投票

您可以尝试将输入的先前值存储在变量中，然后在附加到输入的 keydown 事件侦听器中侦听 Ctrl + 

Z
组合键。当它被触发时，您可以将输入的值设置为之前存储的值。

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) {
    if (prevInput) {
      input.value = prevInput;
      input.selectionStart = prevInput.length;
    }
  }
})
<input id="input" />

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

0
投票

“监听并重新实现 ctrl+z”是一个不好的方法。还有其他方法可以触发浏览器 UI 中内置的撤消/重做，您无法拦截或重新实现，例如上下文菜单

正确的做法是不改变 value 属性，而是根据情况使用 

document.execCommand()
和 
"insertText"
或 
"delete"
命令

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.