多个输入框的撤销/重做行为及优化方案
网页开发中，多个输入框（或文本域）共存的情况很常见。浏览器默认的撤销/重做 (Ctrl+Z/Cmd+Z) 功能会依次遍历所有可编辑元素，从最后编辑的元素开始撤销或重做。 这在某些场景下会造成用户体验问题，例如，用户在搜索框和评论框中分别输入内容，撤销操作可能先从评论框回到搜索框，而非用户期望的顺序。
问题分析：
浏览器默认的撤销/重做机制基于编辑历史的顺序，并非根据输入框的功能或分组进行管理。这导致在多个输入框同时使用时，撤销/重做顺序可能与用户预期不符，影响用户体验。
解决方案：
本文提出一种基于监听键盘事件的解决方案，可以部分解决这个问题。 通过监听 keydown 事件，当按下撤销快捷键 (Ctrl+Z/Cmd+Z) 且焦点在空输入框时，阻止默认的撤销行为。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
以下代码片段展示了该方案的核心逻辑：
document.addEventListener('keydown', (e) => {
if (/(textarea|input)/.test(e.target.localName) && e.key === 'z' && (e.metaKey || e.ctrlKey) && !e.target.value.length) {
e.preventDefault();
}
});
这段代码只在以下条件下阻止默认撤销行为：
- 焦点元素是
<input>或<textarea></textarea>元素。 - 按下的是撤销快捷键 (Ctrl+Z 或 Cmd+Z)。
- 输入框当前为空。
改进与扩展：
上述方案仅针对空输入框有效。 为了更完善的解决方案，可以考虑以下改进：
- 基于ID或类名选择性地阻止撤销： 通过为不同的输入框设置唯一的ID或类名，可以针对特定输入框进行撤销/重做行为的控制，避免全局性的阻止。
- 自定义撤销/重做栈： 为每个输入框维护独立的撤销/重做栈，实现更精细的控制。这需要更复杂的代码实现，但能提供最佳的用户体验。
- 使用框架或库： 一些前端框架或库（如 React、Vue、Angular）提供了更高级的状态管理机制，可以更方便地实现自定义撤销/重做功能。
选择哪种方案取决于项目的复杂性和需求。 对于简单的场景，监听 keydown 事件并根据输入框状态进行条件判断可能就足够了。 而对于更复杂的应用，则需要考虑自定义撤销/重做栈或使用框架提供的状态管理机制。
