焦点事件，当一个元素（比如链接或表单）得到或失去焦点时发生。

实例：

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>焦点事件</title>

 6 </head>

 7 <body>

 8 <h1>失去焦点后转大写</h1>

 9 <p>输入字符，可以转换成大写！</p>

10 <input id="s">

11 <br><br>

12 <button>点击我，input失去焦点</button>

13 <p id="out">

14     <script >

15         var EL = document.getElementById('s');

16         EL.addEventListener('blur', checkkey, false);

17

18         function checkkey(e){

19             var str = EL.value;

20             alert("你输入的字符是："+str);

21             out.textContent=str.toUpperCase();

22         }

23     </script>

24 </body>

25 </html>

JavaScript 焦点事件的更多相关文章

  1. JavaScript焦点事件、鼠标事件和滚轮事件使用详解

    网址:http://www.jb51.net/article/78094.htm

  2. JavaScript文本框焦点事件

    效果图如下: <!-- 当文本框获得焦点时候,如果文本框内容是 请输入搜索关键字 清空文本框,输入内容变黑色 --> <!-- 当文本框失去焦点时候,如果文本框无内容,则添加灰色的 ...

  3. Javascript高级编程学习笔记（62）—— 事件（6）焦点事件

    焦点事件 焦点事件会在页面元素获得或者失去焦点时触发,利用焦点事件和 document.hasFocus() 方法配合使用 以及 document.activeElement 属性配合可以知晓用户在页 ...

  4. jquery 触发/失去焦点事件例子详解

    触发焦点: $("Element").focus() 触发每一个匹配元素获得焦点事件. $("Element").focus(function) 事件会在获得焦 ...

  5. JavaScript焦点轮播图

    在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...

  6. js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法

    js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法 javascript如何捕捉IE窗口失去焦点事件window.onblur = function(e) { //you code}; 弹框的 ...

  7. jquery之鼠标失去焦点事件

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. Javascript知识——事件

    O(∩_∩)O~~又是新的一周开始了,今天还是在继续学习Javascript知识,今天主要讲了事件的知识.现在就总结下吧. 事件 事件一般是用于浏览器和用户操作进行交互.最早是 IE 和 Netsca ...

  9. JavaScript系列----事件机制

    1.事件流 1.1.标准事件流 所谓的标准事件流指的的:EMCAScript标准规定事件流包含三个阶段,分别为事件捕获阶段,处于目标阶段,事件冒泡阶段. 下面是一段html代码,根据代码来说明标准事件 ...

随机推荐

  1. DoS,DDoS,DRoS攻击

  2. 01_描述对象_类图（Class Diagram）

    1.   作用 用于面向对象软件开发的分析和设计阶段,描述系统的静态结构. 描述类与类.类与接口.接口与接口之间的静态结构和关系,描述系统的结构化设计.最基本的元素:类.接口. 用于应用程序的一般概念 ...

  3. 赶紧收藏！最好用的BI工具都在这了！

    1.bi厂商--思迈特软件Smartbi 广州思迈特软件有限公司成立于2011 年,以提升和挖掘企业客户的数据价值为使命,专注于商业智能与大数据分析软件产品与服务.思迈特软件是国家认定的"高 ...

  4. 解决shell脚本错误$’r’ command not found

    从windows上传了一个脚本到Linux上执行 出现如下错误:$'\r': command not found这是windows与Unix文本编辑的默认格式不同造成的,需要转成unix格式. 解决方 ...

  5. 封闭类和封闭方法（sealed）

    因为所有的类都可以被继承,为了防止类的继承被滥用,C#中提出了密封类的概念. 如果想声明一个类,并且该类不能被其他类所继承.那么使用sealed关键字可以将类和方法封闭起来,使类不能被继承,方法不能被 ...

  6. Linux主机内存评估手册-从零到无

    --时间:2020年10月22日 --作者:飞翔的小胖猪 文档基于Centos Linux操作系统作为生产服务器运行环境.实时的查看分析当前系统内存的使用情况是否存在内存瓶颈,结合应用及现行业务需求分 ...

  7. Python推导式

    Python推导式 推导式:是Python中提供的一个非常方便的功能,可以通过一行代码实现创建 list.dict.tuple.set的同时初始化一些值. 1.列表推到式 # -*- coding: ...

  8. 微信小程序下拉框实现

    小程序中是没有直接的下拉框标签可以使用的,所以下拉框需要手动写,或者使用框架 因为考虑到下拉框展开的时候,可能需要遮挡住其余的样式,这里就用的cover-view标签.(不考虑遮挡的可以换成普通的vi ...

  9. 聊聊视频中的编解码器，你所不知道的h264、h265、vp8、vp9和av1编解码库

    你知道FFmpeg吗?了解过h264/h265/vp8/vp9编解码库吗? 我们日常生活中使用最广泛的五种视频编码:H264(AVC).H265(HEVC).vp8.vp9.av1都分别是什么?由哪些 ...

  10. 从原理学习Java反序列化

    1 序列化与反序列化 1.1 概念 序列化: 将数据结构或对象转换成二进制串的过程 反序列化:将在序列化过程中所生成的二进制串转换成数据结构或者对象的过程 1.2 使用场景 当你想把的内存中的对象状态 ...