jQuery 监听文本框内容变化

HTML部分代码

     
请输入培训主题：
          

              

1.根据input值改变而触发事件,propertychange方法

           $('#tit').on('input propertychange', function() {//监听文本框
                    console.log($('#tit').val());
           });

 

2.keydown事件 

        keydown事件监听几乎所有按键操作，在键盘按下瞬间触发，若在keydown事件处理函数中立即获取文本框中的内容，通常会有一个字符的偏差。

             $('#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 事件不同，每插入一个字符，就会发生 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());
                 }
                });

 

        可用来计算在输入域中的按键次数：

Enter your name: 
Keypresses:0

 

5.change事件

        change事件监听Tab、Enter按键，同时焦点转移至其它界面组件时也会触发此事件。用于文本框内容的验证较为方便

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