真实项目中遇到的,需求是:一个文本框,一个按钮,当文本框输入内容时,按钮可用,当删除内容时,按钮不可用。
刚开始用的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事件了,例如文本区还能输入的个数,把文本框的内容实时取出等等。