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. 你知道如何优化Join语句吗？

    join语句的两种算法,分别是:NLJ和BNL 测试数据: create table t1(id int primary key, a int, b int, index(a)); create ta ...

  2. Linux如何添加硬盘

    一.命令操作: df       #查看磁盘空间 fdisk     #分区/查看分区 mkfs      #格式化 df  -h(以人类易读) -m(以M为单位读取)            #查看硬 ...

  3. 利用JaCoCo统计接口测试中代码覆盖率

    ​        做接口测试,很多时候都会听到,你接口测试的覆盖率是多少?很多人会回答80%,你怎么统计的,他说覆盖了80%的需求.这个回答没有错误,但是片面,我们不能只考虑需求的覆盖率,还有业务的覆 ...

  4. Linux服务器更改Apache2默认页面

    方式一 获取root权限 su root //或者 sudo -i 进入 /var/www目录下 cd /var/www 创建目录 mkdir -m 777 myhtml // myhtml为自己创建 ...

  5. 图片转换成base64预览

    来源:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL 真心不错写得,思路比较清晰.已经测试过 注意: ...

  6. abp(net core)+easyui+efcore实现仓储管理系统——ABP WebAPI与EasyUI结合增删改查之一(二十七)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...

  7. canvas入门，就是这个feel！

    钙素 Canvas 是在HTML5中新增的标签用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图.也就是说我们将通过JS完成画图而不是css. canva ...

  8. TypeScript SDK 和 REST API

    在本文中,我们将讨论CUBA平台中已经存在很长时间的一个功能,但是很多人还不知道,这就是前端SDK生成器,并了解它如何与CUBA的REST API插件一起使用. Java+JavaScript - 在 ...

  9. Receptive Field Block Net for Accurate and Fast Object Detection

    Receptive Field Block Net for Accurate and Fast Object Detection 作者:Songtao Liu, Di Huang*, and Yunh ...

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

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