jQueryはテキストボックスの内容の変化をリスニングする

HTML部分コード

     
       ：
          

              
1.input値の変更によりイベントがトリガーされ、propertychangeメソッド

           $('#tit').on('input propertychange', function() {//     
                    console.log($('#tit').val());
           });

 
2.keydownイベント
keydownイベントはほとんどのキー操作を傍受し、キーボードが押された瞬間にトリガーされ、keydownイベント処理関数でテキストボックスの内容をすぐに取得すると、通常は1文字の偏差があります.

             $('#tit').on('keydown', function() {
                      console.log($('#tit').val());                    
                 });

 
コンテンツの取得を遅らせると、完全なコンテンツを取得できます.

               $('#tit').on('keydown', function() {
                       setTimeout(function() {
                              console.log($('#tit').val());
                         }, 1000);
                 });

 
3.keyupイベント
keyupイベントリスニングキー範囲はkeydownイベントと同じであり、キーが持ち上げられた瞬間にトリガーされ、keyupイベント処理関数でテキストボックスの内容を取得すると、同じキーが押されて持ち上げられない場合を処理できない
4.keypressイベント
keypressイベントはkeydownイベントと似ています.このイベントは、ボタンが押されると発生します.現在フォーカスされている要素で発生します.
ただし、keydownイベントとは異なり、1文字挿入するたびにkeypressイベントが発生します.
keypress()メソッドはkeypressイベントをトリガーしたり、keypressイベントが発生したときに実行する関数を規定したりします.
keypressイベントはShift、Ctrl、Alt、Windowsおよびその他の制御キーを傍受せず、Tabを傍受せず、Enterを傍受する.イベントオブジェクトからEnterが押されたか否かを判断できます
 

          $('#tit').bind('keypress', function(event) {
                   if(event.keyCode == "13") {
                      console.log($('#tit').val());
                 }
                });

 
入力フィールドのキー数を計算するために使用できます.

i=0;
$(document).ready(function(){
  $("input").keypress(function(){
    $("span").text(i+=1);
  });
});



Enter your name: 
Keypresses:0

 
5.changeイベント
Changeイベントは、Tab、Enterキーをリスニングし、他のインタフェースコンポーネントにフォーカスを移すとイベントがトリガーされます.テキストボックスの内容の検証に便利

 $("#tit").on('change', function () {
                      if($("#tit").val() !== '') {
                          console.log($("#tit").val());
                    }
               });