「jQuery」テキストボックスに複数のイベントリスナを登録する
環境
Google Chrome 103.0.5060.114
Windows 10 Home 64bit
jQuery 3.6.0
構文
$(要素).on({
“focus":function(e){処理コード}
focus:テキストボックス内にカーソルを当てる
blur:カーソルを外して任意の箇所をクリックします
change:値を変更してテキストボックス内でエンターキーを押します
使用例
<!DOCTYPE html> <html> <body> 名前: <input type="text" id="userid" value="山田" maxlength="6"> <p>イベントリスナ名:<span id="show"></span></p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $("#userid").on({ "focus":function(e){ $("#show").text("focusカーソルを当てる"); }, "blur":function(e){ $("#show").text("blurクリック"); }, "change":function(e){ $("#show").text("changeエンターキーを押す"); } }); </script> </body> </html>
実行結果
テキストボックス内にカーソルを当てる場合、「イベントリスナ名: focusカーソルを当てる」が表示されます。 テキストボックス内で入力値を変更してエンターキーを押す場合、「イベントリスナ名:changeエンターキーを押す 」が表示されます。