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

实例：

 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. CVE-2021-40449 NtGdiResetDC UAF

    背景   CVE-2021-40449是一个存在于Win32k内核驱动中的UAF漏洞.该漏洞在2021年八月下旬九月上旬被Kaspersky发现用于野外攻击活动中.通过Hook win32k驱动执行N ...

  2. WPF空格换行

    换行 (写在Text中才起作用) 空格  https://www.cnblogs.com/dc10101/archive/2011/11/14/2248432.html

  3. MM32F0140 GPIO驱动LED灯（MM32F0140 GPIO）

    目录: 1.MM32F0140简介 2.MM32F0140系统时钟配置 3.MM32F0140的GPIO外设配置及其初始化 4.使用官网的Systick定时器做延时 5.MM32F0140 GPIO驱 ...

  4. [USACO20FEB]Equilateral Triangles P 题解

    优雅的暴力. 设三个点为 \((i,j,k)\),则有 \(6\) 个未知数即 \(x_i,x_j,x_k,y_i,y_j,y_k\).又因为有 \(2\) 条关于这 \(6\) 个未知数的方程 \( ...

  5. LGP3311题解

    为什么我和同学对比了一下,发现我和他的做法差别很大啊 对于这种问题,我们把整个字符串分为两个部分:前缀顶着最高位和后缀没有顶着最高位. 我们枚举这个前缀,然后后缀通过 DP 来搞定. 不包含任何一个子 ...

  6. Java数组经典例题

    数组中元素的求和 public class T02 { public static void main(String[] args) { int[][]arr=new int[][]{{1,2,3,4 ...

  7. Windows10 1809版本Windows自动更新服务无法禁用问题解决方案

    症状 Windows Update服务已经在服务管理器中禁用,但是莫名奇妙的会被自动设置为手动,并会自动下载补丁.原因 微软加强了系统更新服务的保护措施,导致按照原有的禁用服务方法,能够随时被恢复.解 ...

  8. Java多线程【三种实现方法】

    java多线程 并发与并行 并发:在操作系统中,是指一个时间段中有几个程序都处于已启动运行到运行完毕之间,且这几个程序都是在同一个处理机上运行,但任一个时刻点上只有一个程序在处理机上运行 并行:一组程 ...

  9. MyEclipse 05_连接mysql数据库进行增删改查

    例子: 1.在数据库中建立如下表 2. 在MyEclipse里按本主博客文MyEclipse 03_jdbc连接数据库,注意数据库名要一致  运行后在Navicat里如下: 代码如下: package ...

  10. .net Core 调用EF Core 爬坑

    .net Core 中调用 EF Core项目 首先得建一个类库供.net Core 的主项目引用:其次,在.net Core 中做注入:最后,在页面中调用 1.类库项目中的操作 1.新建类库项目 2 ...