【问题标题】: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 很满意(请参阅我添加到答案中的图片)。
    猜你喜欢
    • 1970-01-01
    • 2015-11-23
    • 1970-01-01
    • 2020-10-30
    • 2012-04-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多