![是否可以在网页上设置键盘快捷键?](https://linux22.com/image/1349725/%E6%98%AF%E5%90%A6%E5%8F%AF%E4%BB%A5%E5%9C%A8%E7%BD%91%E9%A1%B5%E4%B8%8A%E8%AE%BE%E7%BD%AE%E9%94%AE%E7%9B%98%E5%BF%AB%E6%8D%B7%E9%94%AE%EF%BC%9F.png)
不是系统或应用程序的快捷键,而是专门在某个网页上使用的键盘快捷键。
例如 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 代码!
您还可以导入或导出您的设置,以便与他人共享。
安装
- 访问快捷方式管理器。
- 点击添加到 Chrome。
- 点击添加。
例子
我没有 Facebook 帐户,因此让我们使用键盘快捷键打开超级用户收件箱。
点击快捷方式管理器多功能框右侧的图标。
点击查看所有设置/添加新快捷方式。
点击输入字段快捷键并按下所需的组合键。
这可以是单个多键快捷键(例如,Ctrl+ Shift+I或Alt+ I),也可以是一系列键(例如,I,N,B,O)X。
选择合适的URL 模式。
要匹配域
superuser.com
及其子域的所有页面,请使用:*://superuser.com/* *://*.superuser.com/*
在行动, 选择执行 Javascript并输入
http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
在(1)。
进入打开收件箱在描述。
我们可以使用 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();
点击节省并重新加载所有打开的超级用户页面。您的快捷方式已准备就绪。
答案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>