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. css3mask淡出文字

    css3mask淡出文字<pre>.p0_11wrap { width: 0.299rem; height: 7.68rem; overflow: hidden; background: ...

  2. Tomcat开启关闭常见问题

    启动 bin/startup.bat ,双击运行该文件即可 访问:浏览器输入: http://localhost:8080 回车访问自己 http://别人的ip:8080 访问别人 可能出现的问题: ...

  3. 深入理解计算机系统 第十章 系统级I/O

    很多高级语言都提供了执行 I/O 的较高级别的函数.为什么我们还要学习 Unix I/O? 原因:1.由于 I/O 和其他系统概念之间有循环依赖关系,故了解 Unix I/O 将帮助我们理解其他的系统 ...

  4. C++中对封装的语法支持——this指针

    this指针 1.this概念 (1) This指针就是用于成员函数区分调用对象. (2) This指针由编译器自动传递,无须手动传递,函数内部隐藏了this指针参数,本类类型的指针. (3) 编译器 ...

  5. C++中对C的扩展学习新增语法——lambda 表达式(匿名函数)

    1.匿名函数基础语法.调用.保存 1.auto lambda类型 2.函数指针来保存注意点:[]只能为空,不能写东西 3.std::function来保存 2.匿名函数捕捉外部变量(值方式.引用方式) ...

  6. nyoj 122-Triangular Sums (数学之读懂求和公式的迭代)

    122-Triangular Sums 内存限制:64MB 时间限制:3000ms 特判: No 通过数:5 提交数:7 难度:2 题目描述: The nth Triangular number, T ...

  7. requests模块发送带headers的Get请求和带参数的请求

    1.在PyCharm开发工具中新建try_params.py文件: 2.try_params.py文件中编写代码: import requests#设置请求Headers头部header = {&qu ...

  8. Spring的整体架构的认识

    Spring的整体架构的认识 一).spring是用来做什么的? spirng使用基本的JavaBean来完成以前EJB所完成的事. 二).EJB EJB: Enterprise JavaBean, ...

  9. Android 如何动态添加 View 并显示在指定位置。

    引子 最近,在做产品的需求的时候,遇到 PM 要求在某个按钮上添加一个新手引导动画,引导用户去点击.作为 RD,我哗啦啦的就写好相关逻辑了.自测完成后,提测,PM Review 效果. 看完后,PM ...

  10. Linux LVM 配置

    本文出自 “www.kisspuppet.com” 博客,请务必保留此出处http://dreamfire.blog.51cto.com/418026/1084729 许多Linux使用者安装操作系统 ...