javascript metaKeyプロパティでmacのcommandキーが押されているかを判定する

javascript metaKeyプロパティでmacのcommandキーが押されているかを判定する

javascriptで、metaKeyプロパティを使用して、macのcommandキーが押されているかを判定するサンプルコードを掲載してます。ブラウザはchromeを使用しています。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 84.0.4147.105

metaKeyプロパティ使い方

metaKeyプロパティを使用すると、、macのcommandキーが押されているかを判定することが可能です。

metaKeyプロパティ使い方

macのsafari(13.1.1)だと、「command」キーが押されていると「commandキーが押されてます」とコンソールに表示されます。

windowsでは、「windowsキー」キーが押されている場合に「true」が返ります。

また、以下のコードを、

document.getElementByIdの省略と三項演算子と、関数をアロー化して、簡潔に記述することもできます。

サンプルコード

以下は、
「実行」ボタンを、windowsキーを押しながらクリックされるたびにカウントをプラスして、押さずにクリックした場合はマイナスして、カウントした数を表示する
サンプルコードとなります。

※cssには「tailwind」を使用して、アロー関数で関数は定義してます。

カウントされていることが確認できます。