网页多输入框撤销重做光标跳跃问题及解决方案
在网页开发中，拥有多个输入框（例如：文本框、文本区域）的页面很常见。当用户在这些输入框中输入内容后，使用浏览器自带的撤销（Ctrl+Z 或 Cmd+Z）和重做功能时，光标可能会在各个输入框之间跳跃，影响用户体验。这是因为浏览器默认的撤销重做机制是全局的，它跟踪所有可编辑元素的历史记录。
如何避免这种恼人的光标跳跃呢？ 我们可以利用 JavaScript 事件监听来巧妙地控制撤销/重做行为。
核心思路： 监听键盘事件，并在特定条件下阻止默认的撤销行为。
以下代码片段展示了如何监听 keydown 事件，并在按下撤销快捷键 (Ctrl+Z 或 Cmd+Z) 且当前输入框为空时，阻止默认的撤销操作：
document.addEventListener('keydown', function(e) {
// 检查事件目标是否为输入框或文本区域，以及是否按下撤销快捷键
if ((e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') &&
(e.key === 'z' && (e.metaKey || e.ctrlKey)) &&
!e.target.value.length) {
e.preventDefault(); // 阻止默认的撤销行为
}
});
这段代码首先监听 keydown 事件。然后，它检查事件目标元素是否为 或 元素，以及是否按下了 'z' 键和 Ctrl 键（Windows）或 Cmd 键（macOS）。最后，它判断当前输入框的值是否为空。只有当所有条件都满足时，才调用 e.preventDefault() 方法阻止默认的撤销行为，从而避免光标跳跃。
代码改进与扩展：
这段代码只阻止了在空输入框中进行撤销操作。 为了更精细的控制，可以根据实际需求修改条件判断逻辑，例如：
- 非空输入框的撤销处理： 可以添加逻辑，在非空输入框中撤销时，只撤销当前输入框的内容，而不影响其他输入框。
- 重做操作的处理： 可以类似地监听重做操作 (Ctrl+Y 或 Cmd+Shift+Z)，并进行相应的处理。
- 兼容性考虑： 可以进一步优化代码，以确保在不同浏览器和操作系统上的兼容性。
通过以上方法，可以有效地解决多个输入框下浏览器撤销重做操作导致光标跳跃的问题，提升用户体验。
