ctrl + Enterで処理を実行する

JavaScript

はじめに

ctrl + Enterに限らず、特定のキーを押下した際になんらかのイベントを発火させる方法です。

ソースコード

document.addEventListener('keydown', (e)=>{
  if (e.ctrlKey && e.keyCode == 13) {
    alert('ctrl and enter!');
  }
})

一応HTMLも。

<!DOCTYPE html>
<html>
  <head>
    <title>ctrl and enter click</title>
  </head>
  <body>
    click ctrl and enter!
    <script src='main.js'></script>
  </body>
</html>

解説

上記のソースコードは、ctrlと、enterを同時に押下するとアラートダイアログが出るようになっています。
'keydown'イベントが発火すると、イベントオブジェクトには、どのキーが押されたかの情報を持つようになります。
その情報について、e.ctrlKey && e.keyCode == 13の条件で、ctrlとenterが両方押されているか判定しているわけです。 なお、どのキーが押されたかのコード一覧はこちらが参考になります。

ちなみに、上記のコードではdocumentオブジェクトにaddEventListenerをしていますが、通常はelementByIdなどで取得した特定のDOMノードに対してイベントを付与するのが自然でしょう。