【學習】文本框輸入監聽事件oninput

真實項目中遇到的，需求是：一個文本框，一個按鈕，當文本框輸入內容時，按鈕可用，當刪除內容時，按鈕不可用。

剛開始用的focus和blur，

$(".pay-text").focus(function(){

                   $(".pay-btn").attr("disabled",false);

                   });

         $(".pay-text").blur(function(){

                   $(".pay-btn").attr("disabled",true);

                   });

天然是不行的，文本框得到焦點後，按鈕不可用，要輸入進內容，按鈕纔可用。又試了keyup事件

$(".pay-text").keyup(function(){

       $(".pay-btn").attr("disabled",false);

       });

輸入是實現了，可是當把輸入的內容刪除時，按鈕不可用沒有實現。加入if判斷

                   if($(this).val==""){

                            $(".pay-btn").attr("disabled",true);

                            }

                   else{

                            $(".pay-btn").attr("disabled",false);

                            }

刪除仍是不起做用。

最後找到了最完美的事件，oninput

定義和用法:

http://www.runoob.com/jsref/event-oninput.html

原文引用：「oninput 事件在用戶輸入時觸發。

該事件在 <input> 或 <textarea> 元素的值發生改變時觸發。

提示： 該事件相似於 onchange 事件。不一樣之處在於 oninput 事件在元素值發生變化時當即觸發， onchange 在元素失去焦點時觸發。」

 

ie8如下是不支持的，還好我這個項目只在移動端使用，因而最後的代碼爲：

html:

<input type="text" class="pay-text" placeholder="輸入金額" oninput="moneyChange(this)">

<input type="button" class="pay-btn" value="確認 "disabled="disabled">

js:

function moneyChange(e){     

                   var money=$(e).val();

                   $(".pay-btn").attr("disabled",false);

                   if(money==""){

                   $(".pay-btn").attr("disabled",true);       

                   }                                            

         }; 

 

之後再遇到須要實時監聽文本框輸入狀況的，就能夠用oninput事件了，例如文本區還能輸入的個數，把文本框的內容實時取出等等。