「jQuery」テキストボックスに複数のイベントリスナを登録する

2022年7月12日

環境
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エンターキーを押す 」が表示されます。

jQuery

Posted by arkgame

関連記事: