【Javascript】 Enterキーを押してイベントを発火させる（aタグのボタンでsubmit）

ネットの情報だとなかなかうまく行かず、苦戦したためメモ書きすることにしました。
※ 私はJavaScriptについては初心者です

今回作成するのはテキストボックスに入力したURLをサーバーに送信（POST）する処理で、送信する際のボタン押下をクリックだけでなく、Enterキーでも可能にするというものです。

送信（submit）ボタンにはaタグを利用しています。

環境はGoogle Chromeです。（バージョン: 91.0.4472.77）

ソースコード

以下に今回イベント発火させるコードを記述します。

Enterキーで実行したいのは、aタグの「送信」の部分です。

<!--  省略 -->
<form method="POST" name="form1">

<b>ULRを指定してください</b>
<input type="text" name="site_url" size="40" maxlength="20">

<a id="exe_botan">送信</a>

</form>
<!--  省略 -->

失敗例

e.keyCode === 13とするコードはどう試してもうまくいきませんでした。

<script>
var btn = document.getElementById('exe_botan');
btn.addEventListener('click', enter_press);

// 動作しないエンターキー制御関数
 function enter_press(e) {
      if (e.keyCode === 13) {
        document.form1.submit();
  }
}
<script>

成功例

冒頭のHTML末尾に以下のコードを記述することで、Enterキー押下をイベントとしてaタグの送信が実行されるようになりました。

<script>
    var btn = document.getElementById('exe_botan');

    // Enterキー押下時、送信処理が実行する
    window.document.onkeydown = function(event){
        if (event.key === 'Enter') {
            document.form1.submit();
        }
    }
</script>

詳細

getElementById('exe_botan')

var btn = document.getElementById('exe_botan');　でaタグのidを取得しています。

window.document.onkeydown

キーが押されたとき、イベントが発生します。

イベントはすべてのキーにおいて、文字が入力されるかどうかにかかわらず発生します。参考

押されたボタンの情報は引数のeventに入り、 if (event.key === 'Enter') で確認します。

このとき押下されたボタンがEnterであればdocument.form1.submit();が実行されinputに入力された情報がPOST送信されます。

Enterキー以外にもEscapeや十字キーもイベントとして指定することができます。

詳しくはこちらに記述されています。mozilla：KeyboardEvent.key