【学习】文本框输入监听事件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事件了,例如文本区还能输入的个数,把文本框的内容实时取出等等。
【学习】文本框输入监听事件oninput的更多相关文章
- JAVAscript学习笔记 js句柄监听事件 第四节 (原创) 参考js使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- n/20 文本框动态监听输入长度
- Android输入法 监听事件
登录界面有一个输入用户名和密码的编辑框: private EditText et_userName;// 账户 private EditText et_password;// 密码 布局文件如下: & ...
- jquery中,使用append增加元素时,该元素的绑定监听事件失效
举例:如果在一个<div id="resultArea"></div>中,通过append添加一个id="checkOutTip"的文本 ...
- EditText中onEditorAction监听事件执行两次
Android的EditText通过setOnEditorActionListener给文本编辑框设置监听事件,但是在其处理方法onEditorAction中的逻辑在每次回车后都触发了两次, 原来是在 ...
- 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
- 监听文本框输入oninput和onpropertychange事件
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onkeydow ...
- 监听文本框输入开发仿新浪微博限制输入字数的textarea插件
监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...
- IE浏览器的脚本文本框监听事件
一.IE8的文本框监听事件 由于在IE8所以input和propertychange都不能用,终于皇天不负有心人让我找到了这个:https://github.com/sophiebits/jquery ...
随机推荐
- 201521123093 java 第四周学习总结
1.平面作业 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 答:1.类与方法的注释 2.super关键字代表的是父类,super.方法表示调用的是父类 2. ...
- 201521123033《Java程序设计》第9周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. answer: 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号 ...
- 201521123038 《Java程序设计》 第十一周学习总结
201521123038 <Java程序设计> 第十一周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多 ...
- 201521123051《Java程序设计》第十一周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. Java多线程同步的方法: (1)同步方法:即有synchronized关键字修饰的方法. 由于java的每个对象 ...
- 201521123080《Java程序设计》第12周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 流(Stream): Stream是从起源(source)到接收(sink)的有序数据 按照流向分可以分为输入 ...
- 201521123106 《Java程序设计》第11周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1. ...
- React Native 轻松集成分享功能(iOS 篇)
产品一直催我在 RN 项目中添加分享功能,一直没找到合适的库,今天让我看到了一个插件分享给大家. 在集成插件之前,需要在各大开放平台上成功注册应用,并通过审核(支持 3 个可选的主流平台).支持的平台 ...
- python之并发编程之多进程
一.共享数据 进程间通信应该尽量避免使用本节所讲的共享数据方式 from multiprocessing import Manager,Process,Lock def work(dic,mutex) ...
- Activiti-04-.Spring integration
ProcessEngineFactoryBean <beanid="processEngineConfiguration"class="org.activiti.s ...
- 认识StringBuffer类
概述: StringBuffer类是线程安全的可变字符序列 线程安全效率低 StringBuffer和String的区别 * String是一个不可变的字符序列 * StringBuffer是一个可变 ...