← 全部文章

教程

给任何网站添加自定义键盘快捷键

17 5月 2026 · 作者 JustZix Team

有些网站为高级用户打造,带有丰富的键盘快捷键。大多数没有。用一条 JustZix JavaScript 规则,你可以给任何页面添加你自己的快捷键——跳到下一篇文章、滚动一份长文档、聚焦搜索框,或者用一次按键触发任何按钮。

构建模块:一个 keydown 监听器

每个快捷键系统都从 document 上的一个监听器开始。JustZix 每次页面加载运行一次你的 JS,所以监听器会及早附加并覆盖整个页面。

document.addEventListener('keydown', function (e) {
  // 在字段中输入时忽略按键
  var tag = (e.target.tagName || '').toLowerCase();
  if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) {
    return;
  }
  // 快捷键写在这里
});

提前的 return 很重要:它阻止你的快捷键在用户于搜索框或评论字段中输入时触发。

示例:用 j 和 k 滚动

这给任何页面带来 Feed 阅读器使用的经典 vim 风格滚动。

document.addEventListener('keydown', function (e) {
  var tag = (e.target.tagName || '').toLowerCase();
  if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) return;

  if (e.key === 'j') {
    window.scrollBy({ top: 400, behavior: 'smooth' });
  } else if (e.key === 'k') {
    window.scrollBy({ top: -400, behavior: 'smooth' });
  } else if (e.key === 'g') {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }
});

示例:跳到下一个或上一个链接

许多网站有"下一页"和"上一页"链接,但没有对应的快捷键。绑定方向键(配一个修饰键,这样不会和正常滚动冲突)。

document.addEventListener('keydown', function (e) {
  if (!e.altKey) return;

  if (e.key === 'ArrowRight') {
    var next = document.querySelector('a[rel="next"], .pagination-next');
    if (next) next.click();
  } else if (e.key === 'ArrowLeft') {
    var prev = document.querySelector('a[rel="prev"], .pagination-prev');
    if (prev) prev.click();
  }
});

按住 Alt 让这个绑定安全——它不会干扰浏览器自己的方向键行为。

示例:用 / 聚焦搜索框

斜杠键在许多大网站上打开搜索。把它添加到其他所有地方。调用 preventDefault(),这样斜杠字符不会落进字段里。

document.addEventListener('keydown', function (e) {
  if (e.key !== '/') return;
  var tag = (e.target.tagName || '').toLowerCase();
  if (tag === 'input' || tag === 'textarea') return;

  var search = document.querySelector(
    'input[type="search"], input[name="q"], input[placeholder*="earch"]'
  );
  if (search) {
    e.preventDefault();
    search.focus();
  }
});

构建一个小的快捷键映射

一旦你有了好几个快捷键,一个查找对象能让规则保持整洁。每个键映射到一个函数。

var shortcuts = {
  'j': function () { window.scrollBy({ top: 400, behavior: 'smooth' }); },
  'k': function () { window.scrollBy({ top: -400, behavior: 'smooth' }); },
  'r': function () { location.reload(); },
  't': function () { window.scrollTo({ top: 0, behavior: 'smooth' }); }
};

document.addEventListener('keydown', function (e) {
  var tag = (e.target.tagName || '').toLowerCase();
  if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) return;

  var action = shortcuts[e.key];
  if (action) action();
});

小技巧

• 始终跳过输入字段,否则你的快捷键会劫持打字。
• 对像重新加载这样的破坏性操作使用修饰键(Alt、Ctrl),这样你不会意外触发它们。
• 检查 e.key 而非已弃用的 e.keyCode——它可读且稳定。
• 如果快捷键只在某个网站才有意义,就按站点限定规则。

在现成示例里查看完整示例,或者下载 JustZix 把它添加到你的浏览器。要把频繁的操作改成工具栏按钮,请阅读复制为 Markdown 和清理 URL 的按钮。