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. layaair和egret的区别

    egret缺点1 编译速度非常慢 2 就是强类型转换非常的麻烦 3 只能用ts 所以只能用他们的IDE 不能用sublime layaair唯一不足的就是 insepct太垃圾 占用游戏界面 所以建议 ...

  2. 关于Struts.xml的路径配置以及对应的连接路径问题

    主要记住一点!: 1.   namespace的路径配置例如:/x:   2.  name名自由配置(主要用来是做action跳转方法用的) 3.  form表单中提交action时以这个格式提交(此 ...

  3. Cef 因系统时间不正常，导致页面访问空白问题

    当我们的系统时间不正常,比如设置一个日期-1999年9月9日,会引发证书问题. 系统时间不正常-IE有概率能访问 触发NavigateError事件,异常代码INET_E_INVALID_CERTIF ...

  4. nyoj 204-Coin Test (python count)

    204-Coin Test 内存限制:64MB 时间限制:3000ms 特判: No 通过数:2 提交数:2 难度:1 题目描述: As is known to all,if you throw a ...

  5. CSS(8)---通俗讲解定位(position)

    CSS(8)---通俗讲解定位(position) CSS有三种基本的定位机制: 普通流.浮动.定位.前面两个之前已经讲过,详见博客: 1.CSS(5)---通俗讲解盒子模型 2.CSS(6)---通 ...

  6. CentOS 7安装图形界面步骤和问题解决方法

    CentOS 7图形安装步骤: 首先需要进行必要的图形组件安装--命令为: yum groupinstall "X Window System " yum groupinstall ...

  7. git、git-lab学习记录

    git: 定义:分布式版本控制工具,类似SVN,区别在于SVN如果网络断了,无法进行版本控制,而git是本地进行版本控制,不多bb了,来个图吧 git常用命令: git add 文件          ...

  8. 某些机root也不能访问dma-buf

    从4.3后,回顾<从surfaceflinger历史变更谈截屏>,只能通过生产消费者队列向surfaceflinger服务申请显示缓冲,这个缓冲就是dma-buf映射的共享内存. bind ...

  9. 你的文章里为什么不放源码Github链接了

    "你的文章里为什么不放源码Github链接了?",一个读者这么问我 我把这张图发给了他,这是我之前放文章中Demo源码的Github仓库 他一脸疑惑,问我怎么了 经常使用Githu ...

  10. 如何使用C#调用C++类虚函数（即动态内存调用）

      本文讲解如何使用C#调用只有.h头文件的c++类的虚函数(非实例函数,因为非虚函数不存在于虚函数表,无法通过类对象偏移计算地址,除非用export导出,而gcc默认是全部导出实例函数,这也是为什么 ...