input标签的事件汇总
我在做一个注册时用到了,在网上查的,比较碎。就汇总了下,
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标签的事件汇总的更多相关文章
- 为input标签绑定事件的几种方式
为input标签绑定事件的几种方式 1.JavaScript原生态的方式,直接复制下面的代码就会有相应的效果 <!DOCTYPE html><html><head> ...
- JS——input标签注册事件
注意:淘宝的lable是用定位制作的,事件是oninput事件 <!DOCTYPE html> <html> <head lang="en"> ...
- input标签的事件之oninput事件
最近在写前端的时候,用到了oninput事件.(其中也涉及了onclick) 问题:鼠标点击数字和运算符的时候,文本框里的内容到达一定长度时,会出现无法继续往后面跟随光标的问题. 解决:见下面代码 这 ...
- 如何用input标签上传多个图片并回显
本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图 我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input-file ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载au ...
- input 标签的监听事件总结
最近在写一个手机端提交表单的项目,里面用了不少input标签,因为项目不太忙,所以,想做的完美点,但是遇到了一些问题,比如:页面中的必填项如果有至少一项为空,提交按钮就是不能提交的状态,所以需要对所有 ...
- [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...
- input标签的accept属性、JQuery绑定keyDown事件
一. input标签的accept属性 当我们上传文件或者注册上传头像时,我们可以一般都是使用: <input type="file" id="my_file&qu ...
- input 的blur事件之后button的onclick事件不执行解决方案
最近发现网页程序中有个BUG,就是在input标签输入框中输入完数据后,直接点击“取消” 按钮的时候.出现网页崩死的情况: 经过小主酸菜我,各种方法的尝试后,找到一个初步可以解决的方案,在这里分享给大 ...
随机推荐
- mysql 命令行快速将数据库转移到另一个服务器中(数据库备份还原)
想将A服务器中的数据库快速转移到B服务器中,一般是先从A服务器中备份下来,下载备份数据,还原到B服务器中.使用phpMyAdmin备份和还原针对数据量很小的情况下很方便,数据量大的话很容易中断失败. ...
- 【刷题】LOJ 6004 「网络流 24 题」圆桌聚餐
题目描述 假设有来自 \(n\) 个不同单位的代表参加一次国际会议.每个单位的代表数分别为 \(r_i\) .会议餐厅共有 \(m\) 张餐桌,每张餐桌可容纳 \(c_i\) 个代表就餐. 为了使 ...
- 【POJ3250】Bad Hair Day 单调栈
题目大意:给定一个由 N 个数组成的序列,求以每个序列为基准,向右最大有多少个数字都比它小. 单调栈 单调栈中维护的是数组的下标. 单调栈在每个元素出栈时统计该出栈元素的答案贡献或对应的值. 单调栈主 ...
- 实战:使用SVN+apache搭建一个版本控制服务器
今天讲的内容: 实战:使用SVN+apache搭建一个版本控制服务器 每天: 10:00 晚上:21:00 服务端:xuegod63.cn IP:192.168.10.63 服务概述: SVN(s ...
- 网络报错:“The connection is not for this device.”
网络报错:“The connection is not for this device.” 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 记得在前几天工作的时候,有一个同时通过微信 ...
- .net MVC框架里怎么写控件
.net的MVC框架如果选择了Razor引擎就需要自己来写控件了,这里列出了一些简单的控件的书写方法 @*这是TextBox控件的写法*@ @Html.TextBox("textbox1&q ...
- python---django中自带分页类使用
请先看在学习tornado时,写的自定义分页类:思路一致: python---自定义分页类 1.基础使用: 后台数据获取: from django.core.paginator import Pagi ...
- vue中的this指向问题
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 移动端网页开发 meta 之 viewport
这几天在搞微信公众平台,涉及到几个页面要写,可是当我测试时发现和想象中不太一样,于是去找了几个页面看了下,发现他们页面头部有 meta viewport 的标签,所以去找了下网上的资料,发现千篇一律, ...
- [转载]使用 NuGet 管理项目库
原文:http://msdn.microsoft.com/zh-cn/magazine/hh547106.aspx 无论多么努力,Microsoft 也没办法提供开发人员所需要的每一个库. 虽然 Mi ...