【学习】文本框输入监听事件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事件了，例如文本区还能输入的个数，把文本框的内容实时取出等等。