当前位置: 首页 > article >正文

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('撤回成功~');}
});

逐个条件详解:

  1. (e.ctrlKey || e.metaKey)
  • e.ctrlKey: 表示用户是否按下了 Ctrl 键 。
  • e.metaKey: 表示用户是否按下了 Meta 键 (在 Mac 上通常是 Command 键)。-
  • 这个条件的意思是:如果用户按的是 Windows/Linux 上的 Ctrl 键 ,或者 Mac 上的 Command 键 ,那么这个条件成立。

📌 目的 :让快捷键兼容所有操作系统。

  1. e.key === ‘z’
  • 这个条件的意思是:用户是否按下了 字母 Z 键 。
  • e.key 是一个字符串,表示用户按下的具体键名。
  • ‘z’ 是小写字符 z。

📌 目的 :识别用户是否按了 Z 键,从而判断是否是 Ctrl+Z / Cmd+Z 撤销快捷键。

  1. !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 的情况,只处理“撤销”。

  1. e.preventDefault();
  • 浏览器对某些快捷键有默认行为。
  • 例如,在大多数编辑器中,Ctrl+Z 默认就是撤销操作。但是如果你自己实现了撤销功能,并希望用自己的逻辑代替浏览器默认行为,就需要使用 preventDefault() 来阻止浏览器的默认动作。

📌 作用 :防止浏览器做自己的撤销操作,让你自定义的 undo() 函数起作用。

!!同理,如果要实现Ctrl/Cmd + C,则把e.key === ‘z’ 修改为e.key === ‘c’ 即可

http://www.lryc.cn/news/2387041.html

相关文章:

  • java高级 -动态代理
  • 机器学习算法:线性回归
  • NotePad++编辑Linux服务器文档
  • 常见小问题(Open Folder as PyCharm Project)
  • 第四十四节:目标检测与跟踪-模板匹配
  • Trae中使用mcp连接MariaDB
  • 第12次04 :首页展示用户名
  • MFC: 文件加解密(单元测试模块)
  • vue+ThreeJs 创建过渡圆圈效果
  • MySQL:12_视图
  • 2025 年开源 LLM 发展趋势细致解读
  • win11+vs2022 安装opencv 4.11.0图解教程
  • n8n 读写本地文件
  • 详解3DGS
  • DEBUG设置为False 时,django默认的后台样式等静态文件丢失的问题
  • 如何提高服务器的QPS来应对618活动的并发流量
  • LlamaFirewall:开源框架助力检测与缓解AI核心安全风险
  • java基础知识回顾3(可用于Java基础速通)考前,面试前均可用!
  • 嵌入式软件架构规范之 - 分层设计
  • 电脑无法识别打印机usb设备怎么办 一键解决!
  • Elasticsearch Synthetic _source
  • C++ -- vector
  • GitLab-CI简介
  • 深入研究Azure 容器网络接口 (CNI) overlay
  • Python打卡第37天
  • 使用 OpenCV 构建稳定的多面镜片墙效果(镜面反射 + Delaunay 分块)
  • HTTP协议版本的发展(HTTP/0.9、1.0、1.1、2、3)
  • 零基础设计模式——结构型模式 - 桥接模式
  • C++对象的内存模型
  • SpringBoot3集成Oauth2.1——4集成Swagger/OpenAPI3