JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTMLのテキスト入力でEnterキー押下時に処理を実行する方法【jQuery実装例】

テキスト入力フィールドでEnterキーが押されたタイミングで特定の処理を実行したいケースは、Web開発において非常によくあります。検索ボックスやフォーム送信などが代表例です。jQueryを使えば、keyupイベントとキーコードの判定を組み合わせることで、Enterキーの押下を簡単に検出できます。

実装のポイント

Enterキーは keyCode の値「13」として認識されます。キーが離されたときに発生する keyup イベントを受け取り、そのキーコードが13であれば、独自に定義したカスタムイベント（ここでは enterKey）をトリガーする仕組みを作ります。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script>
         $(document).ready(function(){
            $('input').bind("enterKey",function(e){
               alert("Enter key pressed");
            });
            $('input').keyup(function(e){
               if(e.keyCode == 13)
               {
                  $(this).trigger("enterKey");
               }
            });
         });
      </script>
   </head>

   <body>
      <input type = "text">
      <p>上のテキスト入力欄でEnterキーを押してください。</p>
   </body>
</html>

コードの解説

  • bind("enterKey", ...)：input要素に対して「enterKey」というカスタムイベントのハンドラを登録します。
  • keyup(function(e){...})：キーが離された瞬間に発生するイベントを監視します。
  • e.keyCode == 13：押されたキーがEnterキーであるかどうかを判定します。
  • trigger("enterKey")：Enterキーだった場合に、登録済みのカスタムイベントを発火させます。

このコードを実行すると、テキストボックス内でEnterキーを押すたびに「Enter key pressed」というアラートが表示されます。

補足：より現代的な書き方

近年のブラウザでは、非推奨となりつつある keyCode の代わりに e.key === "Enter" を使った判定も推奨されています。また、bind() は古いAPIのため、現在は on() を使用するのが一般的です。

$(document).ready(function(){
  $('input').on('keyup', function(e){
    if(e.key === 'Enter'){
      alert('Enterキーが押されました');
    }
  });
});

どちらの方法でも動作しますが、新規プロジェクトでは後者の書き方を採用するのがおすすめです。

  1. HTMLのinput type="date"の使い方を徹底解説！日付入力フィールドの実装方法

    input type=dateとは？HTMLの<input type=date>は、日付を入力するためのフォームフィールドを作成できる要素です。年・月・日を選択形式で簡単に入力できるため、誕生日や登録日など、ユーザーから日付情報を受け取りたい場面で非常に便利です。この入力タイプを使用すると、ユーザーがフィールドをクリックした際にカレンダー形式のデートピッカーが表示され、視覚的で直感的な操作により日付を選択できます。手入力による書式のばらつきも防げるため、データの一貫性が保たれる点も大きなメリットです。ブラウザ対応状況注意：かつてはFirefoxとInternet Explorerが

  2. Seleniumでテキスト入力ボックスのEnterキー操作をシミュレートする方法

    Selenium WebDriverを使用すると、HTMLのテキスト入力ボックスに対するEnterキーの押下を簡単にシミュレートできます。その際に活用するのが sendKeys メソッドで、引数として Keys.ENTER を渡します。また、同じ動作は Keys.RETURN を引数に渡すことでも実現できます。Keys クラスを利用するためには、あらかじめコード内で org.openqa.selenium.Keys パッケージをインポートしておく必要があります。ここでは、入力ボックスにテキストを入力した後、ENTER／RETURNキーを送信する手順を具体的に見ていきましょう。実装例Keys.E