我在做一个注册时用到了,在网上查的,比较碎。就汇总了下,

1.onfocus  当input 获取到焦点时触发

2.onblur  当input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件,用于判断标签为空。

3.onchange 当input失去焦点并且它的value值发生变化时触发,个人感觉可以用于注册时的确认密码。

4.onkeydown 按下按键时的事件触发,

5.onkeyup 当按键抬起的时候触发的事件,在该事件触发之前一定触发了onkeydown事件--相当于一个按键,两个事件,没怎么用过

6.onclick  主要是用于 input type=button,input作为一个按钮使用时的鼠标点击事件

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. 为input标签绑定事件的几种方式

    为input标签绑定事件的几种方式 1.JavaScript原生态的方式,直接复制下面的代码就会有相应的效果 <!DOCTYPE html><html><head> ...

  2. JS——input标签注册事件

    注意:淘宝的lable是用定位制作的,事件是oninput事件 <!DOCTYPE html> <html> <head lang="en"> ...

  3. input标签的事件之oninput事件

    最近在写前端的时候,用到了oninput事件.(其中也涉及了onclick) 问题:鼠标点击数字和运算符的时候,文本框里的内容到达一定长度时,会出现无法继续往后面跟随光标的问题. 解决:见下面代码 这 ...

  4. 如何用input标签上传多个图片并回显

    本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图 我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input-file ...

  5. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  6. input 标签的监听事件总结

    最近在写一个手机端提交表单的项目,里面用了不少input标签,因为项目不太忙,所以,想做的完美点,但是遇到了一些问题,比如:页面中的必填项如果有至少一项为空,提交按钮就是不能提交的状态,所以需要对所有 ...

  7. [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...

  8. input标签的accept属性、JQuery绑定keyDown事件

    一. input标签的accept属性 当我们上传文件或者注册上传头像时,我们可以一般都是使用: <input type="file" id="my_file&qu ...

  9. input 的blur事件之后button的onclick事件不执行解决方案

    最近发现网页程序中有个BUG,就是在input标签输入框中输入完数据后,直接点击“取消” 按钮的时候.出现网页崩死的情况: 经过小主酸菜我,各种方法的尝试后,找到一个初步可以解决的方案,在这里分享给大 ...

随机推荐

  1. shit aliyun

    shit aliyun 垃圾的 aliyun 什么鬼逻辑,怎么填写都不对,holy shit! 校验规则: // 对不起,昵称包含不可接受字符或被管理员屏蔽,请选择其它昵称 // 昵称的长度必须大于等 ...

  2. information_schema系列十一

    1: INNODB_CMP 和INNODB_CMP_RESET 这两个表存储的是关于压缩INNODB信息表的时候的相关信息, Column name Description PAGE_SIZE Com ...

  3. 一本通1644【例 4】佳佳的 Fibonacci

    1644:[例 4]佳佳的 Fibonacci 时间限制: 1000 ms         内存限制: 524288 KB sol:搞了大概一个多小时什么结果都没,被迫去看题解,感觉自己菜到家了qaq ...

  4. BZOJ4066 简单题(KD-Tree)

    板子题. #include<iostream> #include<cstdio> #include<cmath> #include<cstdlib> # ...

  5. NOI2018旅游记

    这居然是我第一次参加非NOIP的NOI系列赛事,有点小期待啊 前几天的UNR我暴露出了许多问题,而且翻了好多分,不过令人震惊的是假设Day1不停电(导致已经写好的T3没交上去)我居然有rk10,虽然并 ...

  6. 【枚举Day1】20170529-2枚举算法专题练习 题解

    题目: http://www.cnblogs.com/ljc20020730/p/6918328.html 评测器:cena 评测记录: 1.OneMoreRectangle 一个矩形 ●如果任意枚举 ...

  7. 【转】crc16几种标准校验算法及c语言代码

    一.CRC16校验码的使用 现选择最常用的CRC-16校验,说明它的使用方法. 根据Modbus协议,常规485通讯的信息发送形式如下: 地址 功能码 数据信息 校验码 1byte 1byte nby ...

  8. 【COGS1752】 BOI2007—摩基亚Mokia

    http://cogs.pro/cogs/problem/problem.php?pid=1752 (题目链接) 题意 给出$n*n$的棋盘,单点修改,矩阵查询. Solution 离线以后CDQ分治 ...

  9. 用rem来做响应式开发(转)

    由于最近在做公司移动项目的重构,因为要实现响应式的开发,所以大量使用到了rem的单位,觉得这个单位有点意思.但是现在貌似用他的人很少.上一篇文章我分享了淘宝写的一篇rem的介绍,介绍的非常全面,但是他 ...

  10. python assert 断言语句的作用

    python assert 断言语句的作用 assert语句的应用场景 使用assert语句是一个很好的习惯. 我们在编写代码的时候, 不知道程序会在什么时候崩溃, 与其让它在深度运行时崩溃, 不如预 ...