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) ...
随机推荐
- Java POI操作Excle工具类
用到了jxl.jar和poi.jar 一些基本的操作Excel的操作方法: import java.io.File; import java.io.FileInputStream; import ja ...
- Linux 字符设备控制技术
字符设备控制技术 一.字符设备控制理论 1.作用 大部分设备除了具有<读写设备>的能力,还应该有<控制设备>的能力.比如改变 波特率 2. 应用程序接口 在用户空间中使用 Io ...
- c# 匿名对象增加动态属性
在开发过程中碰到了一个需求,需要动态创建对象及其动态属性.在尝试几种方法后,最后完成了需求,记录下过程,给园友参考下 1.动态创建对象一:匿名对象 ",Birthday =DateTime. ...
- PictureBox控件鼠标进入的手形改变和提示
PictureBox控件载入了图片后,如果要设置其为链接作用的功能,一般需要当鼠标移动到其上时鼠标自动变为手形以提示用户此时可以点击,如果图形无法方便辨识链接的具体功能,最好此时给与一定提示. 1.鼠 ...
- linux安装配置sendmail实现邮件发送
sendmail配置 yum -y update sendmail sendmail-cf SendMail相关目录1. 设定档目录:/etc/mail2. 记录档:/var/log/maillog3 ...
- WordPress 去除图片img标签的高度与宽度
要求 如,在桌面设备上,图片使用的是以下的HTML代码: 代码如下 复制代码 1 <img src="abc.png" alt="abc" width ...
- c#中SqlHelper类的编写(三)
下面我们直接用可变长度参数的方式写一个完整的SqlHelper增删改public static int ExecuteNonQuery(string sql,params Parameter[] pa ...
- DOM结构学习备忘
1.动态修改页面title: document.title="项目启动33"; 2.IE中打开UTF-8编码的网页中title显示空白页的问题 3.
- 8款超绚丽的jQuery焦点图动画
随着前端技术和浏览器技术的不断发展,人们开始对网页视觉效果的要求越来越高.我们经常会在页面中看到很多炫酷的图片焦点图播放控件,有些甚至是大屏的焦点图占用大片的页面空间,从而吸引用户的眼球.本文要分享的 ...
- redis setnx 分布式锁
private final String RedisLockKey = "RedLock"; private final long altTimeout = 1 * 60 * 60 ...