2021.06.13  

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

JavaScript    


ネットの情報だとなかなかうまく行かず、苦戦したためメモ書きすることにしました。

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

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

環境はGoogle Chromeです。(バージョン: 91.0.4472.77)

ソースコード

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

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

htmlファイル
<!--  省略 -->
<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や十字キーもイベントとして指定することができます。

キーボード上の表示 if文で比較するkey名
Enter Enter
Esc Escape
ArrowUp
ArrowLeft
ArrowRight
ArrowDown

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

コメント
現在コメントはありません。
コメントする
コメント入力

名前 (※ 必須)

メールアドレス (※ 必須 画面には表示されません)

送信