HTML文本框，文本域，監聽文本的實時變化

概要：

　　今天要做一個文本域的實時校驗，實時文本變化，字符長度不能超過512。搞得有點麻煩。文本域的change事件，keyup事件等等都不合適，最后參考別人用計時器完成的，用計時器

效率對於小文本，效率應該還是滿高的。

 

文章順序：

1.參考的資料

2.我的（部分）代碼，供參考

 

1.參考的資料：

http://ilewen.com/questions/1118

這個問題我遇到過，開始使用的是監聽keyup事件，但這樣做有弊端，就是在用右鍵剪切調里面的內容時，因為沒有鍵盤操作，所以無法觸發keyup，同理 在粘貼時也存在該現象，於是在查找相關知識后，發現有一個oncut和onparste事件，這兩個的確可以監聽到鼠標的剪切，粘貼動作，可是無法得到剪 切后的值，也就是說他是在改變input內容之前觸發的，得到的是未操作前的值，因此也不適用。最后通過一個定時器實現了該效果，需要利用 setInterval()函數。

jQuery代碼：

$(document).ready(function(){

        var oldword=$('#textinput').val();

        var time=function(){
            var keyword=$('#textinput').val();
              if(oldword!=keyword){
                alert("asb");//參考
                oldword=keyword;
              }
              else{
                  //寫你自己要實現的功能
              }
          }

          var intervalnum=null;

          $('#companysearch').focus(function(){
           intervalnum=setInterval(time,100);
          }).blur(function(){
           clearInterval(intervalnum);
          });
    });

 

 

2.我的（部分）代碼，供參考。代碼寫的不是很漂亮，望高手指點一二，謝謝。

　　
function check() {
　　//根據判斷這個flag ，你就能執行你的業務邏輯了。
    var flag = false;
　　
　　......

　　$('.l-dialog-textarea').after('<p id="warning" style="color:red;padding-left:5px;">您還可以輸入512個字</p>');
    var oldword = $('.l-dialog-textarea').val();
　　//定時器執行的程序
    var time = function () {
        var keyword = $('.l-dialog-textarea').val();
        if (keyword != oldword){
            var size = keyword.length;
            var cha = 0;
            if(size > 512){
                keyword = keyword.substr(0, 512);
                $('.l-dialog-textarea').val(keyword);
                $('#warning').html('您還可以輸入 0 個字');
            }else{
                cha = 512 - size;
                $('#warning').html('您還可以輸入 ' + cha + ' 個字');
                flag = true;
            }
            oldword = keyword;
        }
    }
    
    var interVal = null;
　　//當某某控件得到焦點時，啟動定時器；下面一個是關閉定時器。
    $('.l-dialog-textarea').focus(function(){
        interVal = setInterval(time, 300);
    });
    $('.l-dialog-textarea').blur(function(){
        clearInterval(interVal);
    });

　　.....

}