input 觸發總結

輸入框檢查的需求,最常見的是即時搜索,今天好好小結一下。

即時搜索的方案:

        (1)change事件    餓。。。。。   觸發事件必須滿足兩個條件:

            a)當前對象屬性改變,並且是由鍵盤或鼠標事件激發的(腳本觸發無效)
            b)當前對象失去焦點(onblur)
 

        (2)keypress  恩,還好。。。。。就是能監聽鍵盤事件,鼠標複製黏貼操作他就無能爲力的趕腳了。。。。。

   (3)propertychange(ie)和input事件

           +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

            input是標準的瀏覽器事件,一般應用於input元素,當input的value發生變化就會發生,無論是鍵盤輸入還是鼠標

            黏貼的改變都能及時監聽到變化

            propertychange,只要當前對象屬性發生改變。(IE專屬的)

            感覺找到了真愛。。。。。但是

            ======

              oninput 和 onpropertychange 這兩個事件在 IE9 中都有個小BUG,

              那就是通過右鍵菜單菜單中的 剪切 和 刪除 命令刪除內容的時候不會觸發,

              而 IE 其他版本都是正常的,目前還沒有很好的解決方案。

            =======

            不過 input & propertychange 仍然是即時搜索比較好的方案


==========================================================================

        實踐了一下

        //格式化顯示卡號

        var cnAdvanceChangeHandle = function(e){

          var value = $(this).val();
            $(this).val(format(value, 4, 19));

        };

 

        //格式化顯示卡號,ie處理

        function changeHandle(target, value){

          $(target).val(value);

        }

        //step參數是設置卡號每隔幾個數字空一格,contrLen是設置只能輸入的字符個數

        var cardNoChangeHandle = function(step, contrLen){

          //中間變量,保存input的值和當前值比較,不相同纔要進行格式化處理

          //避免內存溢出異常

          var tempValue;

          return function(e){

            var value = $(this).val();

            if(value != tempValue){

              value = format(value, step, contrLen);

              tempValue = value;

              changeHandle(this, value);

            }

          };

        };

        var cnHandle = cnChangeHandle(4, 19);

        //判斷瀏覽器版本,是ie6,7,8

        !$.support.leadingWhitespace && $(".card-no").bind("propertychange", cnHandle );

        //其他高級瀏覽器

        $(document).delegate(".card-no", "input", cnAdvanceChangeHandle);

        

        eg:

        技術分享



 


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章