form操作でエンターキーを押した時のイベント取得【jQuery・JavaScript】

はじめに

今回は、form操作時のエンターキーを押した時のイベントの取り方です。

formを使う時って最後に、「検索」を押させることが多いと思います。

遷移時の操作についてタグを用いての方法は2つ

• aタグ
• buttonタグ

記述が少なく済むので、今回はbuttonタグを使用しましょう

「検索」をbuttonタグのsubmitにしてしまえば、PC、スマホ関係なくエンターキーを押せば飛ばすことができます。

developer.mozilla.org

というわけで、エンターキーを押してテキストボックスが空の時にはalertを出して遷移させないようにしたいと思います。

$('.form').on('submit', () => {
  const keyword = $('.form-box').val().trim();
  if(keyword === "") { 
    return alert("空欄だよ！"); 
  }
  return true; 
});

※ .trim()は空白スペースがあった場合、削除してくれます