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获取图片每个像素点<pre> $i = imagecreatefromjpeg("test.jpg"); //图片路径 for ($x = 0; $x < ...

  2. Python之tkinter.messagebox弹窗

    messagebox:tkinter的消息框.对话框 一.messagebox.showinfo(title='提示', message='错误') from tkinter import * fro ...

  3. ubuntu安装应用日志

    1.安装搜狗输入法,去官网下 2.安装vim 3.安装vbox5.16,导入win7(还未成功,报错UUID不匹配),改5.14试试 4.安装微信:http://www.cnblogs.com/Blu ...

  4. 为React绑定事件，并修改state中的值

    import React from 'react' export default class ClickS extends React.Component { constructor () { sup ...

  5. HTML学习 day02

    1.HTML的相关概念 网站建设流程 网页组成  网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior). html(Hypertext Mark ...

  6. Flex修改皮肤样式

    Flex修改皮肤大致有三种方式: (以button为例) 第一种:修改外观 1.flex项目中新建mxml外观.

  7. 官方宣布IPV4已然耗尽，IPv6D风口或将到来？

    急救箱 IPV4真的用完了吗? ​ IPV4真的用完了吗?其实 小兰 一点也不惊讶 ,毕竟全球人口这么多,多N的几次幂就用完了吧- 43亿个IPv4地址已分配完毕,这意味着没已经有更多的IPv4地址可 ...

  8. beta 2/2 阶段中间产物提交

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/9961 一.小组情况 队名:扛把子 组长:孙晓宇 组员:宋晓丽 梁梦瑶 韩 ...

  9. kali linux 修改更新源和更新命令

    1.修改sources.list源文件: vim /etc/apt/sources.list #aliyun 阿里云 deb http://mirrors.aliyun.com/kali kali-r ...

  10. numpy和matplotlib下载中出现的问题

    在安装numpy的时候遇到如下所示的错误: 经过几个小时的查找,最终发现是pygame的路径不对导致.将pygame的具体路径加上后,问题解决.实施如下:得出一个结论:路径很重要,千万得小心哦. 报错 ...