input 标签的监听事件总结
最近在写一个手机端提交表单的项目,里面用了不少input标签,因为项目不太忙,所以,想做的完美点,但是遇到了一些问题,比如:页面中的必填项如果有至少一项为空,提交按钮就是不能提交的状态,所以需要对所有的input内容进行监听,刚开始我用了jquery的keyup事件解决问题,但是后来测试出一个bug,如果用户选择粘贴复制的话,keyup事件不能触发,也就不能通过判断input内容来改变提交按钮的状态。下面就这种问题做下总结,希望对自己和他人以后能有点帮助。
1.onfocus 当input 获取到焦点时触发
2.onblur 当input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点再失去焦点的时候会触发相应的js
3.onchange 当input失去焦点并且它的value值发生变化时触发
4.onkeydown 在 input中有键按住的时候执行一些代码
5.onkeyup 在input中有键抬起的时候触发的事件,在此事件触发之前一定触发了onkeydown事件
6.onclick 主要是用于 input type=button,当被点击时触发此事件
7.onselect 当input里的内容文本被选中后执行一段,只要选择了就会触发,不是非得全部选中
8.oninput 当input的value值发生变化时就会触发,不用等到失去焦点(与onchange的区别)
以上事件可以直接放到input的属性里,例如:<input type="text" onfocus="a();" onblur="b()" onchange="c();" onkeydown="d();" />,也可以通过js给input dom元素添加相应的事件,如:document.getElementByTagName('input').onfocus = function();
input 标签的监听事件总结的更多相关文章
- 为不具有change事件的html标签设置监听事件
change事件会在文本内容或选项被更改时触发. 该事件仅适用于<input type="text">和<textarea>以及<select> ...
- JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件
JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log ...
- js 获取当前焦点所在的元素、给元素和input控件添加键盘监听事件、添加页面级的键盘监听事件
页面级的键盘监听事件 document.onkeydown = function (event) { var e = event || window.event || arguments.callee ...
- 监听浏览器tab选项卡选中事件,点击浏览器tab标签页回调事件,浏览器tab切换监听事件
js事件注册代码: <script> document.addEventListener('visibilitychange',function(){ //浏览器tab切换监听事件 if( ...
- window.onresize监听事件
window.onresize监听事件 onresize 事件会在窗口或框架被调整大小时发生. 支持onresize的标签:<a>, <address>, <b>, ...
- DOM初体验(绑定事件,监听事件)
JavaScript的组成: ECMAScript(js的基本语法).DOM(文档对象模型).BOM(浏览器对象模型) DOM的作用: 1. 找到页面上的元素 2. 增添.删除.修改页面上的元素 3. ...
- javascript事件有哪些?javascript的监听事件
事件类型: 1.界面事件 onload:描述文档,图片,css已经frame,object加载完毕时触发,window.onload window.onload = function(){ //代表图 ...
- jquery中,使用append增加元素时,该元素的绑定监听事件失效
举例:如果在一个<div id="resultArea"></div>中,通过append添加一个id="checkOutTip"的文本 ...
- input 输入值的监听 禁止输入特殊字符
1.input 输入值的监听 //用于监听input的值变化(input的值产生变化才会触发事件) (function ($) { $.fn.watch = function (callback) ...
随机推荐
- 配置多个Log4net实例
应用场景: 控制软件工程拆分为多个子项目,在开发阶段希望每个子项目的日志是单独的.同时又希望日志统一集中定义在Tools(Tools为工具类项目,生成Tools.dll)下,而不是分散在各个子项目中. ...
- 剑指Offer24 复杂链表的复制
/************************************************************************* > File Name: 24_Comple ...
- 【转】亿欧盘点:杭州十家代表性O2O企业
[ 亿欧导读 ] 11月13日亿欧网将走入杭州,联合B座12楼.正和岛召开“2014 中国O2O新商业峰会“.亿欧网据O2O产业图谱,整理出杭州十家O2O企业:点我吧.快的打车.杭州19楼.婚礼纪.淘 ...
- 【转载】TalkingData首席金融行业专家鲍忠铁:18亿数据解读移动互联网
http://www.36dsj.com/archives/33417 鲍忠铁:大家下午好! 今天我会讲三个议题,一是用18亿数据解读现在移动互联网的生态圈.二是看看数据有什么样的应用.三是大数据的隐 ...
- 【转】利用MVC模式开发Java应用程序[组图]
Java是一种面向对象的语言,是实现面向对象编程的强大工具.我们在实际编程中,应该运用并发挥其最大效能.但是,要利用面向对象编程思想,自己独立开 发出好的Java应用程序,非凡是大.中型程序,并不是一 ...
- 十六、Android 滑动效果汇总
Android 滑动效果入门篇(一)—— ViewFlipper Android 滑动效果入门篇(二)—— Gallery Android 滑动效果基础篇(三)—— Gallery仿图像集浏览 And ...
- [老老实实学WCF] 第四篇 初探通信--ChannelFactory
老老实实学WCF 第四篇 初探通信--ChannelFactory 通过前几篇的学习,我们简单了解了WCF的服务端-客户端模型,可以建立一个简单的WCF通信程序,并且可以把我们的服务寄宿在IIS中了. ...
- (转)IIS7 优化-网站请发并发数
1. 调整IIS 7应用程序池队列长度 由原来的默认1000改为65535. IIS Manager > ApplicationPools > Advanced Settings Queu ...
- Spring IOC整理
示例展示 Spring的一大特点是利用配置的xml文件实现依赖注入. 所谓依赖注入是指把一个业务对象注入另一个业务对象,从而达到对象间的松耦合.(注意是业务对象哦!)依赖注入讲的通俗一点,就是让一个对 ...
- Java获取操作系统信息
今天在看jdk的demo时候发现java获取系统操作系统的一些信息,例如内存使用情况,于是自己也想研究研究! 百度一番,发现有2种方法! 1.sun自带的API 2.第三方jar(Sigar) 先 ...