JavaScript 库在按住 alt/ctrl 时显示带有键盘快捷键的工具提示答案

【问题标题】：JavaScript Library to show tooltips with keyboard shortcuts when holding down alt/ctrlJavaScript 库在按住 alt/ctrl 时显示带有键盘快捷键的工具提示
【发布时间】：2012-07-13 10:53:45
【问题描述】：

是否有一个 JavaScript 库，当用户按住 ctrl/alt 时，将在页面上具有使用该键的相关键盘快捷键（通过 accesskey 属性）的元素上显示工具提示？控制

【问题讨论】：

也许是浏览器扩展？而不是“JavaScript 库”……？还是您希望将其应用于您自己的网站？当您提到“关联的键盘快捷键”时，您是指 AccessKeys，还是其他？
这是一个网络应用程序，它可能需要使用 AccessKeys
@w3d 感谢 AccessKeys 提示。我能够找到符合我要求的东西。
您是要为您的网站执行此操作还是在您的浏览器中执行此操作？我知道 Opera 会自动执行此操作。
@RyanB 这是一个 B2B 网络应用程序。

标签： javascript accessibility

【解决方案1】：

这就是我要找的：KeyCandy。尽管按住 Ctrl 时我必须修复闪烁。

我知道我以前见过这样的事情。不确定是不是同一个。谁有更好的？

【讨论】：

FWIW 2 问题：1-keyCandy Demo 似乎在 IE8 中不起作用。 2-依赖accessKeys要非常小心，浏览器热键会否决AccessKeys，如果用户正在使用辅助技术，那么那些有先见之明。 UK Gov standard 是最接近标准 AccessKey 的东西。

【解决方案2】：

我认为KeyTips 是我以前见过的那个。它确实比 KeyCandy 看起来更好，虽然我喜欢 KeyCandy 如何让 Ctrl 成为访问键的修饰符。

它是这样的：

有some issues with browser reserved shortcuts，但如果我将其设为hosted app for chrome it would be able to handle any shortcut，这是一个内部Intranet 网站

【讨论】：

【解决方案3】：

您不需要任何用于键盘快捷键的库。只需使用 keydown 对象中传递的 Object 中的键。例如：

var element = document.querySelector("#element");
element.addEventListener("keydown", function (event) {
    //Ctrl+Alt+Del
    if (event.key === "Delete" && event.ctrlKey === true && event.altKey === true) {
        //Disables Ctrl+Alt+Del
        event.preventDefault();
        alert("You pressed Ctrl+Alt+Del, too bad!");
    }
    //Win+R (On Windows, it opens up the Run Prompt)
    else if (event.key === "r" && event.metaKey === true) {
        //Disable it once again
        event.preventDefault();
        alert("You can never 'run' from me!!");
    }
    //Create A Save Prompt When Users Ctrl+S
    else if (event.key === "s" && event.ctrlKey === true) {
        event.preventDefault();
        //Give The User Options
        alert("First choose an option to save, then continue.");
    }
});

然后，从那里，只需将title 属性添加到元素，以创建浏览器生成的工具提示，并在按下快捷方式时在元素上简单地focus()。

JavaScript：

var element = document.querySelector("#element");

if (event.key === "h" && event.ctrlKey === true) {
    event.preventDefault();
    element.focus();
}

HTML：

<p title="help section" id="element">Help Help Help<p>

希望有帮助！

【讨论】：

这不能回答问题。问题是当按下ctrl/alt 键时，如何在所有具有快捷方式（通过accesskey 属性）的元素旁边显示工具提示。
@SamHasler 我更改了答案，请再修改一次。
抱歉，这仍然无法回答问题。我想要在按住Ctrl 时显示所有可能的快捷方式的东西。我对 KeyTips 很满意（请参阅我添加到答案中的图片）。