巧妙解决网页多输入框撤销重做冲突
在网页设计中，多个输入框（如文本框、文本区域）并存的情况很常见。然而，浏览器默认的撤销/重做功能(Ctrl+Z/Cmd+Z)会在这些输入框间依次切换，造成用户体验混乱。例如，用户在三个输入框中输入内容后，点击撤销，操作会从最后一个输入框开始，依次撤销到第一个。
本文提供一种方法，有效避免这种跨输入框的撤销/重做行为。核心在于，浏览器默认的撤销/重做机制是全局的，我们需要通过 JavaScript 代码，在特定条件下阻止默认行为。
解决方案：监听键盘事件，条件性阻止默认行为
我们监听 keydown 事件，当用户按下撤销快捷键 (Ctrl+Z 或 Cmd+Z) 时，判断当前获得焦点的元素是否为输入框或文本区域，且该输入框内容为空（表示已无内容可撤销）。如果是，则调用 e.preventDefault() 阻止默认行为。
以下 JavaScript 代码片段演示了该方案：
document.addEventListener('keydown', function(e) {
if (/(textarea|input)/.test(e.target.localName) &&
(e.key === 'z' && (e.metaKey || e.ctrlKey)) &&
!e.target.value.length) {
e.preventDefault();
}
});
代码解释：
-
/(textarea|input)/.test(e.target.localName)：检查事件目标元素是否为文本区域或输入框。 -
e.key === 'z' && (e.metaKey || e.ctrlKey)：检查是否按下了 'z' 键以及 Cmd 或 Ctrl 键。 -
!e.target.value.length：检查输入框内容是否为空。
只有当以上所有条件都满足时，才阻止默认的撤销行为。 需要注意的是，此方法仅在当前输入框为空时阻止撤销，不会完全禁用撤销功能。
通过这个方法，您可以有效改善用户体验，避免因跨输入框的撤销/重做而造成的混乱。
