最近在写一个手机端提交表单的项目,里面用了不少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 标签的监听事件总结的更多相关文章

  1. 为不具有change事件的html标签设置监听事件

    change事件会在文本内容或选项被更改时触发. 该事件仅适用于<input type="text">和<textarea>以及<select> ...

  2. JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件

    JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log ...

  3. js 获取当前焦点所在的元素、给元素和input控件添加键盘监听事件、添加页面级的键盘监听事件

    页面级的键盘监听事件 document.onkeydown = function (event) { var e = event || window.event || arguments.callee ...

  4. 监听浏览器tab选项卡选中事件,点击浏览器tab标签页回调事件,浏览器tab切换监听事件

    js事件注册代码: <script> document.addEventListener('visibilitychange',function(){ //浏览器tab切换监听事件 if( ...

  5. window.onresize监听事件

    window.onresize监听事件 onresize 事件会在窗口或框架被调整大小时发生. 支持onresize的标签:<a>, <address>, <b>, ...

  6. DOM初体验(绑定事件,监听事件)

    JavaScript的组成: ECMAScript(js的基本语法).DOM(文档对象模型).BOM(浏览器对象模型) DOM的作用: 1. 找到页面上的元素 2. 增添.删除.修改页面上的元素 3. ...

  7. javascript事件有哪些?javascript的监听事件

    事件类型: 1.界面事件 onload:描述文档,图片,css已经frame,object加载完毕时触发,window.onload window.onload = function(){ //代表图 ...

  8. jquery中,使用append增加元素时,该元素的绑定监听事件失效

    举例:如果在一个<div id="resultArea"></div>中,通过append添加一个id="checkOutTip"的文本 ...

  9. input 输入值的监听 禁止输入特殊字符

    1.input  输入值的监听 //用于监听input的值变化(input的值产生变化才会触发事件) (function ($) { $.fn.watch = function (callback) ...

随机推荐

  1. xcode6 真机运行报错 Command /usr/bin/codesign failed with exit code 1

    解决方法: 百度下载‘iphone配置实用工具’, 打开此软件之后,选择预配置描述文件, 选中iphone过期和重复的描述文件,按delete键删除.然后重启xcode即可

  2. C# 短信猫(SMS cat) 操作源码开发经验

    我曾经开发的某项目需要使用短信猫模块,要求使用C#编程操作.能独立使用的动态链接库之一就是网上流传的sms.dll,但它的功能较少,不能满足需求,鉴于一时找不到合适的完整代码,我深入研究了短信协议,借 ...

  3. 说说C#和.NET的关系

    .NET和C#的关系:C#语言可以通过.NET平台编写.部署.运行.NET应用程序..NET可以支持包括C#在内的多种语言编写的应用程序..NET平台主要包括FCL(框架类库)它是微软事先定义好的类的 ...

  4. ORACLE的分组统计之ROLLUP(一)

    Oracle 9i以后,扩展了group by 的功能,能够满足大部分多维数据的分析统计功能,主要表现: 1. rollup,cube,grouping sets 扩展group by字句提供了丰富的 ...

  5. iOS - UIView操作(SWift)

    1. UIView 视图的渐变填充 override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after ...

  6. 【学习笔记】【C语言】指针

    一.指针变量的定义 1. 格式:变量类型 *指针变量名; 2. 举例:int *p;   char *p2; 3. 注意:定义变量时的*仅仅是指针变量的象征 二.利用指针变量简单修改其他变量的值 1. ...

  7. python常错: join() 方法

    描述 Python join() 方法用于将序列中的元素以指定的字符连接生成一个新的字符串. 语法 join()方法语法: str.join(sequence) 参数 sequence -- 要连接的 ...

  8. C# 将日期转换成中文格式

    没有什么难点,只是要小心,要考虑到月.日上 10 的说法,比如:10 不能直接转换成一〇,也不能像上 20 那样转换成一十〇,应该是十. 特点总结: 数字为 10 时,结果为十: 数字大于 10 时, ...

  9. [Bootstrap]组件(四)

    导航条 移动设备上折叠(可开关),超过规定视口标签时候水平展开模式 依赖插件 注意点:导航条内元素过多或其他原因导致元素内元素宽度过长,会引起折行-->解决:a.减少导航内元素或者减少宽度  b ...

  10. 9款经典华丽的CSS3分享按钮

    如果你经常活跃在一些社交网站上,那么你肯定会看到过很多形式各异的分享按钮,目前由于HTML5和CSS3的普及,很多分享按钮也都应用了CSS3样式,甚至会有很多带有动画的CSS3分享按钮.本文就向大家介 ...