JavaScriptのオリジナルショートカットキーのやり方

こんちには。 今回はオリジナルショートカットキーの作り方です。 やはりオリジナルショートカットキーが使えるとなにかと便利ですよね。

やり方

まず始めにキーボードが押された際のイベントを設定します。

document.onkeydown = function(e) {
}

次に使いたいショートカットキーのキーコードを調べます。例えばCtrl + C ならCのキーコード、Alt + A ならAのキーコードを調べます(Ctrl、Altについては後述します)。KeyCodeこちらで調べられます。調べたら、それとctrlキー、altキーを組み合わせて行きます。

しかし、注意点があります。ctrlキーは、macにないのです。別のキーが反応します。macにはcommandキーとcontrolキーがあり、windowsでいうところのctrlキーはcommandキーです。ややこしいですね。コードをみるのが速いと思うので下をご覧ください。

document.onkeydown = function(e) {
    if (e.ctrlKey) alert('コントロールキーが押されています');
    if (e.metaKey) alert('コントロールキーが押されています');
}

macでは e.ctrlKey = controlキー、windowsではe.ctryKey = ctrlキーです。ではmetaKeyはなにかというとこちらはcommandキーです。windowsでは対応するキーはありません。さて、Macではcommandキーの時、Windowsの時はctrlキーを反応させるにはどうしたらいいでしょうか? 実は答えはありません。 ctrlKeyがtrueならmetaKeyはfalse、metaKeyがtrueならctrlKeyがfalseとするのが一番近いですが、Macでもcontrolキー単体で押すと反応してしまいます。まあこれで十分実用的だと思います。

document.onkeydown = function(e) {
    if((e.ctrlKey && !e.metaKey) || (!e.ctrlKey && e.metaKey)) alert('コントロールキーが押されています');
}

終わりに

いかがでしたでしょうか? これを機にオリジナルキーを作ってみてはいかがでしょうか。