JavaScriptでEnterキーが入力された時にSubmitする方法と無効化する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでEnterキーが入力された時にSubmitする方法と無効化する方法について現役エンジニアが解説しています。ブラウザではEnterキーでSubmitされます。Submitを無効にするには、キー入力を監視してe.preventDefaultメソッドでデフォルトの動作を無効にします。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptでEnterキーが入力された時にSubmitする方法と無効化する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでEnterキーが入力された時にSubmitする方法と無効化する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

Enterキーが入力された時にSubmitする方法

HTMLのform要素の値をサーバーに送信することをSubmitと呼びます。Submitを行うにはいくつかの方法があります。

  1. Submitボタンを押す:最も一般的な方法です。input要素のtypeがsubmitのボタンを用意します
  2. form内のinput要素でEnterキーを押す:form内のinput要素でEnterキーが押されると、submitボタンを押したことと同じ働きになります
  3. JavaScriptでSubmitを行う:JavaScriptからもSubmitを行うことができます。例えばSubmitする前に入力された値をチェックするような場合に利用できます

Enterキーが入力された時にSubmitするには特別な設定は必要ありません。ほとんどのブラウザではform内にinput要素とsubmitボタンを用意すれば、Enterキーが入力された時にSubmitされます。

ソースコードは以下のようになります。

<form method="post" action="" onsubmit="return func1()" id="form1">
  名前:<input type="text" id="name" value="煌木 太郎"><br>
  点数:<input type="text" id="point" value="100"><br>
  <input type="submit" value="送信">
</form>

 

Enterキーを無効化する方法

それでは逆にEnterキーが押された時にSubmitされないようにするにはどうしたら良いでしょうか。

いくつかの方法が考えられますが、もっとも汎用的に利用できるのが「form内で入力されたキーを判定する」という方法です。具体的にはEnterキーの入力を無効にします。

ソースコードは以下のようになります。

document.getElementById("form1").onkeypress = (e) => {
  // form1に入力されたキーを取得
  const key = e.keyCode || e.charCode || 0;
  // 13はEnterキーのキーコード
  if (key == 13) {
    // アクションを行わない
    e.preventDefault();
  }
}

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

今回のサンプルプログラムでは、Enterキーを無効化する方法を確認します。なお、Submitした際にページが遷移しないよう、Submit自体も無効化しています。その方法も併せて確認すると良いでしょう。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>sample</title>
</head>

<body>
  <form method="post" action="" onsubmit="return func1()" id="form1">
    名前:<input type="text" id="name" value="煌木 太郎"><br>
    点数:<input type="text" id="point" value="100"><br>
    <input type="submit" value="送信">
  </form>

<script language="javascript" type="text/javascript">
  // Enterキーが押された時にSubmitされるのを抑制する
  document.getElementById("form1").onkeypress = (e) => {
    // form1に入力されたキーを取得
    const key = e.keyCode || e.charCode || 0;
    // 13はEnterキーのキーコード
    if (key == 13) {
      // アクションを行わない
      e.preventDefault();
    }
  }

  const func1 = () => {
    // form要素の値を取得する
    name = document.getElementById("name").value;
    point = document.getElementById("point").value;

    // 取得した値をコンソールに出力する
    console.log(`名前:${name}`);
    console.log(`点数:${point}`);

    // actionで指定した先に遷移させない
    return false;
  }
</script>
</body>

</html>

実行結果は以下のようになります。

Enterキーを押してもSubmitされませんが、送信ボタン(Submitボタン)を押すとSubmitされるようになります。

 

筆者プロフィール

太田和樹(おおたかずき)

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握(実証実験)、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。