网页开发技巧：监听 Ctrl + S 快捷键并自定义保存逻辑

在日常开发中，我们有时希望用户在网页中按下 Ctrl + S （或 Mac 的 Cmd + S ）时，不是触发浏览器默认的 保存网页 ，而是执行自己的保存逻辑，比如保存表单内容、编辑器文本或自动同步到服务器。

实现方式

我们可以通过 keydown 事件来监听键盘操作：

document.addEventListener('keydown', function (e) {
  // 检测 Ctrl + S 或 Mac 上的 Cmd + S
  if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
    e.preventDefault(); // 阻止浏览器默认保存网页
    console.log('Ctrl+S 被按下！执行自定义保存逻辑');

    // TODO: 在这里写你的保存逻辑，比如保存文本到服务器
  }
});

关键点解析

• e.ctrlKey → 检测 Ctrl 键（Windows / Linux）
• e.metaKey → 检测 Mac 上的 Cmd 键
• e.key.toLowerCase() === 's' → 判断按下的是否是 S 键
• e.preventDefault() → 阻止浏览器默认行为（打开 保存网页 对话框）

实际应用场景

• 自定义编辑器（如在线 Markdown、富文本编辑器）
• 表单内容自动保存到本地或服务器
• 快捷键操作触发特定功能，而不是浏览器默认行为