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

实例：

 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. [题解]第十一届北航程序设计竞赛预赛——I.神奇宝贝大师

    题目描述 一张n*m的地图,每个格子里面有一定数量的神奇宝贝,求一个最优位置,使得所有神奇宝贝到该位置的曼哈顿距离最小. 一共有T组数据,每组数据包含两行,第一行是n和m(1<=n,m<= ...

  2. 智能脚本工具（Smart scripts）测试应用

    如果你是一位网络测试人员,您的工作中是否有出现过以下困扰呢? · 重复机械式的测试有时让你觉得工作是如此的枯燥乏味!· 只增不减的测试用例让你下班越来越晚!· 请求老板招人,人却永远不够用! 但值得庆 ...

  3. 论文解读（Geom-GCN）《Geom-GCN: Geometric Graph Convolutional Networks》

    Paper Information Title:Geom-GCN: Geometric Graph Convolutional NetworksAuthors:Hongbin Pei, Bingzhe ...

  4. 细述kubernetes开发流程

    本文介绍如何对kubernetes进行二次开发,仓库如何管理,git分支如何管理,怎样利用CI去编译与发布以及如何给社区贡献代码等,结合实际例子,望对大家有所帮助. 开发环境构建 Fork 把gith ...

  5. 【C# 线程】编译器代码优化技术 循环提升：Loop Hoisting

    转载自:https://gandalfliang.github.io/2019/01/15/loop-hoisting/ Loop Hoisting 在上篇文章中,提到 Loop Hoisting , ...

  6. 【基础知识】CPU原理之减法、乘法和除法

    中介绍了布尔逻辑.数学和电路的关系,我们也得到了与门.或门.非门.或非门.与非门.异或门等门电路以及一个加法器,并且了解了计算机是如何做加法的,这篇文章介绍一下计算机是如何做减法以及乘除法的. 0x0 ...

  7. Java多线程编程核心技术---多线程技能

    1.继承Thread /** * Copyright (C), 2018-2018, * FileName: MyThread * Author: 大象 * Date: 2018-06-08 22:3 ...

  8. QT：QT Creator下载安装

    学习自: QtCreator5.12.6安装图文教程 - 知乎 (7条消息) Qt Creator下载安装_芒种.的博客-CSDN博客 (7条消息) QT5.11下载与安装教程_杨书航的博客-CSDN ...

  9. python安装各种插件

    http://www.lfd.uci.edu/~gohlke/pythonlibs/#pip 感受:如果编辑pip真的一直出问题,考虑降成32位的进行安装.毕竟合理搭配比木桶突出有用.

  10. 【转载】SQL实例大全

    from:http://blog.csdn.net/basycia/article/details/52134279 OR from:http://www.cnblogs.com/yubinfeng/ ...