我正在一个网站上工作,每个页面上都有按钮,例如“提交”和“取消”。这些按钮中的每个按钮都有一个accesskey属性。提交按钮的accesskey属性设置为S,取消按钮的accesskey属性设置为C

在不同的浏览器中使用不同的修饰符可以激活访问键。 Internet Explorer,Safari和Google Chrome仅使用alt,而Firefox则同时使用alt和Shift键。同样,Firefox使用alt + s打开历史记录菜单。

该问题的答案不应建议更改浏览器配置中的设置,因为在生产站点上这是不可行的。

我如何将Firefox用于accesskey的修饰键更改为alt,并防止历史记录菜单打开?

我正在Ubuntu 16.04中工作。

最佳答案

据我所知,您不能更改激活accesskey所需的组合键,但是您要实现的功能不需要使用accesskey属性。您可以直接监听keydown事件。

将一个keydown事件监听器添加到文档中。在处理程序功能中,检查是否按下了alt和s键。如果它们(没有其他修饰键被按下)防止事件的默认操作,则在提交按钮上触发单击事件。在提交按钮上触发单击事件将依次触发提交事件监听器,而triggering the submit event on the form directly may not.

const submit = document.querySelector('#submit')

document.addEventListener('keydown', e => {
  // If the only modifier key is the alt key, and the s key is pressed
  if(!e.metaKey && !e.ctrlKey && !e.shiftKey && e.altKey && e.key === 's') {
    e.preventDefault()  // Prevent the mozilla history menu from opening
    submit.click()      // Trigger the form submission
  }
})

<form action=""><button type="submit" id="submit"><u>S</u>ubmit</button></form>

注释:
1.尽管这在Firefox的当前稳定版本中有效,但我尚未测试其他版本
2.本示例使用2015版本The ECMAScript Language Specification中引入的语言功能。这些功能不是实现所需效果所必需的,但是使代码更易于阅读。如果需要支持较旧的浏览器,则可以使用var代替const,并使用标准函数代替胖箭头函数。
3.不幸的是,由于沙箱操作,本示例中的“堆栈溢出”摘要功能不起作用,请改用此example on JSBin

09-20 03:56