js实现监听Ctrl/Cmd+C复制、Ctrl/Cmd+Z撤销 等快捷键
使用document.addEventListener监听keydown事件即可:
上代码:
document.addEventListener('keydown', function(e) {// 判断是否按下 Ctrl/Cmd + Zif ((e.ctrlKey || e.metaKey) && e.key === 'z' && !e.shiftKey) {e.preventDefault(); // 阻止浏览器默认行为console.log('撤回成功~');}
});
逐个条件详解:
- (e.ctrlKey || e.metaKey)
- e.ctrlKey: 表示用户是否按下了 Ctrl 键 。
- e.metaKey: 表示用户是否按下了 Meta 键 (在 Mac 上通常是 Command 键)。-
- 这个条件的意思是:如果用户按的是 Windows/Linux 上的 Ctrl 键 ,或者 Mac 上的 Command 键 ,那么这个条件成立。
📌 目的 :让快捷键兼容所有操作系统。
- e.key === ‘z’
- 这个条件的意思是:用户是否按下了 字母 Z 键 。
- e.key 是一个字符串,表示用户按下的具体键名。
- ‘z’ 是小写字符 z。
📌 目的 :识别用户是否按了 Z 键,从而判断是否是 Ctrl+Z / Cmd+Z 撤销快捷键。
- !e.shiftKey
- e.shiftKey 是一个布尔值,表示用户是否同时按下了 Shift 键。
- !e.shiftKey 表示:没有按下 Shift 键。
- 所以这个条件的意思是:用户按的是 Ctrl/Cmd + Z ,但不是 Ctrl/Cmd + Shift + Z
📌 目的 :区分“撤销”和“重做”。通常:
Ctrl+Z 是撤销;
Ctrl+Shift+Z 或 Cmd+Shift+Z 是重做(Redo);
所以这里排除掉带有 Shift 的情况,只处理“撤销”。
- e.preventDefault();
- 浏览器对某些快捷键有默认行为。
- 例如,在大多数编辑器中,Ctrl+Z 默认就是撤销操作。但是如果你自己实现了撤销功能,并希望用自己的逻辑代替浏览器默认行为,就需要使用 preventDefault() 来阻止浏览器的默认动作。
📌 作用 :防止浏览器做自己的撤销操作,让你自定义的 undo() 函数起作用。