javascript - alt/ctrl を押したときにキーボード ショートカットでツールチップを表示する JavaScript ライブラリ

Question

ユーザーが ctrl/alt を押したときに、accesskeyそのキーを使用する (属性を介して) 関連付けられたキーボード ショートカットを持つページ上の要素にツールチップを表示する JavaScript ライブラリはありますか? コントロール

Answer 1

これは私が探していたものです: KeyCandy。Ctrl を押したときのちらつきを修正する必要がありますが。

私は以前にこのようなものを見たことがあることを知っていました。それが同じものかどうかはわかりません。誰かがより良いものを手に入れましたか？

Answer 2

KeyTipsは私が以前に見たものだと思います。KeyCandy が Ctrl をアクセスキーの修飾子にする方法が気に入っていますが、確かに KeyCandy よりも優れています。

外観は次のとおりです。

ブラウザーの予約済みショートカットにはいくつかの問題がありますが、これは内部イントラネット サイトであるため、 Chrome用にホストされたアプリにすると、任意のショートカットを処理できるようになります

Answer 3

キーボード ショートカット用のライブラリは必要ありません。keydown オブジェクトで渡されたオブジェクトのキーを使用するだけです。例えば：

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>

それが役立つことを願っています!