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) ...
随机推荐
- Matlab之画图
1.设置对数坐标 set(gca,'XScale','log','YScale','log'); 2.加网格 grid on; 3.加log对齐网格 set(gca,'XScale','log','Y ...
- 一步步搭建自己的轻量级MVCphp框架-(二)一个国产轻量级框架Amysql源码分析(1)
这个框架是我一个做PHP的朋友“祥子”介绍给我的,Git地址https://coding.net/u/srar/p/AMP/git 下面从入口文件 总线程 ( index.php )开始进行分析 &l ...
- Sql Server CTE递归
WITH cte AS ( SELECT a.FNUMBER,a.FMATERIALID AS MainId,b.FMATERIALID AS ChileID,CAST(b.FMATERIALID A ...
- Floyd最短路径算法
看完这篇文章写的小程序,Floyd最短路径算法,求从一个点到另一个点的最短距离,中间可以经过其他任意个点.三个for循环,从i到j依次经过k的最短距离,最外层for循环是经过点K,内部两个循环是从i( ...
- C#中数组、ArrayList和List<T>三者的发展历程
在C#中数组,ArrayList,List使我们用的最多的类型之一.他们共同的作用都是能够存储一组对象. 那么问题来了: (1)为什么要有三个一样作用的东西呢?他们都很完美吗? (2)谁先出生,又是因 ...
- (转载)struts2的驱动模型
模型驱动即ModelDriver,所谓ModelDriven,意思是直接把实体类当成页面数据的收集对象. 比如,有实体类User如下: public class User { private int ...
- 【转】理解依赖注入(IOC)和学习Unity
IOC:英文全称:Inversion of Control,中文名称:控制反转,它还有个名字叫依赖注入(Dependency Injection).作用:将各层的对象以松耦合的方式组织在一起,解耦,各 ...
- TextEdit验证
using System;using System.Collections.Generic;using System.ComponentModel;using System.Drawing;using ...
- linux传送文件至服务器
scp安全文件拷贝(基于ssh的登陆) 1.你想把本地/home下的文件linux.tar.gz传送至远端服务器10.108.125.30,远端服务器的账号名为name,保存至服务器/home ...
- C语言带参数的main()函数
示例代码: #include<stdio.h> int main(int argc, char *argv[]) { int i; printf("Total %d argume ...