【学习】文本框输入监听事件oninput

时间:2024-07-21 23:36:44

真实项目中遇到的,需求是:一个文本框,一个按钮,当文本框输入内容时,按钮可用,当删除内容时,按钮不可用。

刚开始用的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事件了,例如文本区还能输入的个数,把文本框的内容实时取出等等。

相关文章