1. onfocus事件

input框获取到焦点时，触发了该事件，比如获取到焦点时，修改input框的背景色。这个功能其实可以使用css的伪类:focus来定义。

2. onblur事件

这个与onfocus事件想法，当input框失去焦点时，触发该事件，比如将输入的文本，统一修改为小写

3. onchange事件

这个事件的发生需要具有2个条件：

  • 失去焦点
  • 内容发生了变化

4. oninput事件

这个时HTML5新加入的事件，IE9之前是不支持的，在IE9之前使用的是: onpropertychange事件，这个事件，用来做实时搜索功能非常的合适。当输入框内容有变化时，实时触发事件，比如输入了一个字符、或者删除了一个字符，都将触发该事件的发生。

5. 示例

事件比较简单，不单独给出示例了，大家可以到网上针对每一个事件，单独搜索示例吧！

[TimLinux] JavaScript input框的onfocus/onblur/oninput/onchange事件介绍的更多相关文章

  1. JS事件 文本框内容改变事件（onchange）通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。

    文本框内容改变事件(onchange) 通过改变文本框的内容来触发onchange事件,同时执行被调用的程序. 如下代码,当用户将文本框内的文字改变后,弹出对话框"您改变了文本内容!&quo ...

  2. JavaScript input框输入实时校验

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. JS改变input的value值不触发onchange事件解决方案 （转）

    方法(一)(转载的网络资料) 需要了解的知识     首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onprope ...

  4. [TimLinux] JavaScript 模态框可拖动功能实现——jQuery版

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. [TimLinux] JavaScript 模态框可拖动功能实现——节流版

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. [TimLinux] JavaScript 模态框可拖动功能实现——原始版

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. input框输入完回车即可查询事件

    简单有效的方法,随笔记录一下在html设置id <input id="search_sim" type="text" class="form-c ...

  8. 使用input file上传文件中onChange事件只触发一次问题

    每次上传文件的时候,都会将当前的文件路径保存至$event.target.value中,当第二次选择文件时,由于两次$event.target.value相同,所以不会触发change事件. 解决方案 ...

  9. IE10 解决input file 同一文件不触发onchange事件

    if (window.ActiveXObject) { var reg = /10\.0/; var str = navigator.userAgent; if (reg.test(str)) { v ...

随机推荐

  1. PHP实现开发者模式出现该公众号提供的服务出现故障 请稍后再试解决方法

    PHP实现开发者模式出现该公众号提供的服务出现故障 请稍后再试解决方法 仔细检查下有没有echo等输出的代码  echo没有输出东西 就是报这个信息  所以调试信息都必须写入日记

  2. pssh系列工具

    一.pssh简介及安装 首先我们来了解下什么是pssh,它是干嘛用的?pssh是一个python编写可以在多台服务器上执行命令的工具,也可以实现文件复制.换而言之就是一个批量管理多台服务器的一个小工具 ...

  3. 替换"marquee"，实现无缝滚动

    js的marquee标签,可以实现元素循环滚动,但是不能无缝连接,要实现“无缝滚动”的效果必须使用js(借鉴百度),思路是使要滚动元素相对位置不断改变,上下滚动就相对top或者bottom,左右滚动就 ...

  4. nyoj 116 士兵杀敌（二）（线段树、单点更新）

    士兵杀敌(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:5   描述 南将军手下有N个士兵,分别编号1到N,这些士兵的杀敌数都是已知的. 小工是南将军手下的军师,南将军经常 ...

  5. pat 1023 Have Fun with Numbers（20 分）

    1023 Have Fun with Numbers(20 分) Notice that the number 123456789 is a 9-digit number consisting exa ...

  6. hopper反汇编工具的逆向伪代码功能并不理想

    hopper的逆向代码功能并不如想象中那么好,尤其是在逆向c++代码时.对于从ObjC进入iOS开发又不太清楚运行时的人员来说,hopper可以将反汇编码输出成[obj selector:what]这 ...

  7. opencv MatchTemplate()模板匹配寻找最匹配部分

    通常,随着从简单的测量(平方差)到更复杂的测量(相关系数),可以获得越来越准确的匹配,然而,这同时也会以越来越大的计算量为代价.比较科学的方法是对所有这些方法多次测试实验,以便为自己的应用选择同时兼顾 ...

  8. vant-ui的van-area使用

    由于官方例子中并没有太多详情,因此记录之,方便以后使用. 1.配置 :area-list="areaList",以初始化全部省市区的数据,其中area.js文件在官方可以下载,放于 ...

  9. Missing radix parameter 错误的解决办法

    下载了Mint-Ui的example,使用npm run dev时发现如下报错: ERROR in ./packages/loadmore/src/loadmore.vue ✘ http://esli ...

  10. 关闭Eslint检查

    Eslint是一个JavaScript的校验插件,通常用来校验语法或代码的书写风格.不过有点过于严格,通常缩减不同也会报错... 这会影响工作效率啊,最好就是在创建项目的时候不要ESlint(选择No ...