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

Question

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

Answer 1

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

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

Answer 2

我认为KeyTips是我以前见过的。它当然看起来比 KeyCandy 更好，尽管我喜欢 KeyCandy 如何使 Ctrl 成为访问键的修饰符。

这是它的样子：

浏览器保留的快捷方式存在一些问题，但由于这是一个内部 Intranet 站点，如果我将其设为chrome的托管应用程序，它将能够处理任何快捷方式

Answer 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>

希望有帮助！