【学习】⽂本框输⼊监听事件oninput
真实项⽬中遇到的，需求是：⼀个⽂本框，⼀个按钮，当⽂本框输⼊内容时，按钮可⽤，当删除内容时，按钮不可⽤。
刚开始⽤的focus和blur，
$(".pay-text").focus(function(){
$(".pay-btn").attr("disabled",false);
});
$(".pay-text").blur(function(){
$(".pay-btn").attr("disabled",true);
});
blur事件
⾃然是不⾏的，⽂本框获得焦点后，按钮不可⽤，要输⼊进内容，按钮才可⽤。⼜试了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
定义和⽤法:
原⽂引⽤：“oninput 事件在⽤户输⼊时触发。
该事件在 <input> 或 <textarea> 元素的值发⽣改变时触发。
提⽰：该事件类似于事件。不同之处在于 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事件了，例如⽂本区还能输⼊的个数，把⽂本框的内容实时取出等等。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。