【學習】文本框輸入監聽事件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事件了,例如文本區還能輸入的個數,把文本框的內容實時取出等等。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM