☰

是否可以在网页上设置键盘快捷键？

tag-icon • tag-icon google-chrome keyboard-shortcuts google-chrome-extensions
是否可以在网页上设置键盘快捷键？

不是系统或应用程序的快捷键，而是专门在某个网页上使用的键盘快捷键。

例如 Gmail 快捷方式。

例子：

在 Facebook 上按Alt+f会将信息流从“热门故事”更改为“最新故事”，反之亦然。

并允许用户自己设置这些快捷方式？也许是一个 chrome 扩展？

答案1

编辑：Chrome 扩展程序已在 Chrome 网上应用店中经过审核并被接受！如果您有兴趣尝试一下，点击这里。

尽管这个问题已经存在 10 年了，但我很惊讶地发现还没有工具可以解决这个问题，所以作为一名年轻的创意网页开发人员，我创建了这个工具，它被称为我的网页快捷方式！

它是开源且 100% 免费的浏览器扩展用于为网络创建自定义快捷方式。希望这对您有所帮助。

在撰写此答案时，Chrome Webstore 团队正在审核它，目前尚未在 Webstore 上提供。因此，您需要从 GitHub Repo 手动安装它。您可以转到发布并下载 v1.0.0 的 zip 文件，解压缩，然后将解压的文件的整个文件夹拖到浏览器的扩展管理器中。

目前仅支持基于 Chromium 的浏览器（Google Chrome、Brave、Opera 等）。

请注意，这是第一个版本，您可能会遇到一些错误，因此如果您发现错误，请为其创建一个问题。

答案2

扩展快捷方式管理器允许您创建自定义键盘快捷键，但执行内部页面操作需要一点 JavaScript 知识，或者至少jQuery 选择器。

官方描述

自定义快捷键；将任何 Javascript 代码或浏览器操作分配给任何按键。

您可以更改浏览器默认快捷键，并将任何书签或 Javascript 操作指定给您的热键。它在 Firefox 上用作 Keyconfig。

示例操作：

  • 标签：“左侧标签”、“上级目录”、“关闭右侧标签”、“打开您喜欢的页面”……
  • 页面：“向上/向下滚动”、“插入您的签名”...
  • 特别：“屏幕截图”
  • 自定义：执行任何书签或 Javascript 代码！

您还可以导入或导出您的设置，以便与他人共享。

安装

  1. 访问快捷方式管理器。
  2. 点击添加到 Chrome。
  3. 点击添加。

例子

我没有 Facebook 帐户，因此让我们使用键盘快捷键打开超级用户收件箱。

  1. 点击快捷方式管理器多功能框右侧的图标。

  2. 点击查看所有设置/添加新快捷方式。

  3. 点击输入字段快捷键并按下所需的组合键。

    这可以是单个多键快捷键（例如，Ctrl+ Shift+I或Alt+ I），也可以是一系列键（例如，I，N，B，O）X。

  4. 选择合适的URL 模式。

    要匹配域superuser.com及其子域的所有页面，请使用：

    *://superuser.com/*
*://*.superuser.com/*

  5. 在行动， 选择执行 Javascript并输入

    http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

    在（1）。

  6. 进入打开收件箱在描述。

  7. 我们可以使用 JavaScript 的.click()方法来模拟鼠标点击网页上的任何项目。棘手的部分是访问这些项目。这时 jQuery 选择器就派上用场了。

    通常情况下，要访问收件箱，您需要点击StackExchange下拉，然后收件箱.我们需要为两者提供合适的选择器。

    • 右键单击StackExchange下拉并点击检查元素。

      您将在开发者工具中看到以下内容：

      <div id="header">
    <div id="portalLink">
        <a class="genu" onclick="StackExchange.ready(function(){genuwine.click();});return false;">Stack Exchange</a>
        </div>
        ...
</div>

      标签<a>已突出显示；这是我们想要模拟点击的元素。

      该元素的类别是膝。我们可以简单地使用选择器.genu，但如果有多个元素属于同一个类，这种方法就无法正常工作。更可靠的方法是将其作为<div>ID的子节点进行访问门户链接（ID 是唯一的），使用选择器#portalLink a.genu。然后，我们使用.click()方法。

      在以下任意一行中输入（2）将完成以下工作：

      // click first <a> element with class `genu'
// inside the element with ID `portalLink'
$('#portalLink a.genu')[0].click();

// click first <a> element with class `genu'
// inside the element with ID `header'
$('#header a.genu')[0].click();

// click first element with class `genu' of the entire page
$('.genu')[0].click();

// click first <a> element of the entire page (unreliable)
$('a')[0].click();

// directly perform the onclick event (easy, but not always available)
StackExchange.ready(function(){genuwine.click();});

    • 在里面StackExchange下拉菜单，右键单击收件箱并点击检查元素。

      您将在开发者工具中看到以下内容：

      <a id="seTabInbox" class="seCurrent">Inbox</a>

      该元素有自己的ID：设置收件箱。

      在以下任意一行中输入（2）将完成以下工作：

      // click first (only) element with ID `seTabInbox'
$('#seTabInbox')[0].click();

// click sixth <a> element of the entire page (unreliable)
$('a')[5].click();

  8. 点击节省并重新加载所有打开的超级用户页面。您的快捷方式已准备就绪。

答案3

我相信他们正在寻找的是“accesskey”属性。要使用，请按 Alt +（accesskey 指定的字母）。

一些例子：

<label for="myInput" accesskey="r"/>
<a href="https://www.w3schools.com/html/" accesskey="h">HTML</a>*

注意：在您的页面中指定 Alt+（您选择的字母）之前，请先测试它，以确保它没有执行某些操作（即 Alt+F 通常会激活 Chrome 的主菜单，因此请明智地选择您的字母）此外，为了使其更加用户友好，最好通过在字母下划线来指示您使用的快捷方式。（即如在前面的例子中，链接应该是这样的：

<a href="#" accesskey="h" title="按 [Alt+H] 跟踪链接"><u>H</u>TML</a>

相关内容