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

实例：

 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. [c/c++]c++控制台操作（基本操作的代码）

    本文转自:http://blog.csdn.net/stude/article/details/7645056 控制台窗口界面编程控制 〇.摘要一.概述二.控制台文本窗口的一般控制步骤三.控制台窗口操 ...

  2. 如何利用Smartbi做数据分析：车企销量排名TOP10的车型

    下面我们来对比一下去年和今年的销量.同比增长情况: 图1. 轿车销量月趋势 图2. SUV销量月趋势 不难看出2月.7月为两个销量低点,而7月销量受天气影响较大,烈日.高温,毫无看车热情,复杂多变的外 ...

  3. 【C# .Net GC】手动监视和控制对象的生命周期（GCHandle）

    这个话题还未做详细研究,暂时用不到,只是粗略看了一下. 使用System.Runtime.InteropServices.GCHandle类来手动控制对象的生命周期 (个人感觉这里可能有一些问题... ...

  4. CSC.exe编译器使用

    如何用CSC.exe来编译Visual C#的代码文件 Visual C#是微软公司推出的新一代程序开发语言,Visual C#是微软公司.Net FrameWork框架中的一个重要的组成部分,也是微 ...

  5. over the Wall

    最近风头很紧,先上两个可用的谷歌镜像给各位应急. https://kfd.me/ http://gufenso.coderschool.cn/ https://github.com/gfw-break ...

  6. xsd文件生成cs文件命令

    C:\Windows\System32>xsd.exe c:/Createst.xsd -c C:\Windows\System32>xsd.exe c:/Creauest.xsd /c ...

  7. python3中collections模块(转)

    https://www.cnblogs.com/zhangxinqi/p/7921941.html

  8. selenium在爬虫中的使用

    一. selenium概述 1.1 定义 Selenium是一个Web的自动化测试工具,最初是为网站自动化测试而开发的,Selenium 可以直接调用浏览器,它支持所有主流的浏览器(包括Phantom ...

  9. 《手把手教你》系列技巧篇（七十一）-java+ selenium自动化测试-自定义类解决元素同步问题（详解教程）

    1.简介 前面宏哥介绍了几种关于时间等待的方法,也提到了,在实际自动化测试脚本开发过程,百分之90的报错是和元素因为时间不同步而发生报错.本文介绍如何新建一个自定义的类库来解决这个元素同步问题.这样, ...

  10. Vue 源码解读（12）—— patch

    前言 前面我们说到,当组件更新时,实例化渲染 watcher 时传递的 updateComponent 方法会被执行: const updateComponent = () => { // 执行 ...