先看onblur事件和onfocus事件的定义：

<element onblur="SomeJavaScriptCode">

<element onfocus="SomeJavaScriptCode">

双引号中的内容是一段js代码，也可以是一个事件函数

在看几个例子：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

    </head>

    <body>

        <input name="btn" type="text" placeholder="请输入显示欢迎学习js的次数" onfocus="study(prompt('请输入显示欢迎学习js的次数'))" >

        <script>

            function study(count){

                for(var i=;i<count;i++){

                    document.write("<h4>欢迎学习js</h4>")

                }

            }

        </script>

    </body>

</html>

运行以上代码，鼠标点击输入框（使输入框获得焦点，如下图）

输入数字后，如下图，

对代码进行修改，如下图：

完整代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

    </head>

    <body>

        <input name="btn" type="text" placeholder="请输入显示欢迎学习js的次数" onfocus="study(prompt('请输入显示欢迎学习js的次数'))" >

        <script>

            $(document).ready(function study(count){

                for(var i=;i<count;i++){

                    document.write("<h4>欢迎学习js</h4>")

                }

            })

        </script>

    </body>

</html>

再点击输入框，使输入框获得焦点，发现没有反应，如下图

原因在于  ready函数，ready函数创建了一个局部函数作用域，外面是不能调用内部的study函数的。所以  你的onblur事件失效是不是这个原因呢？

解决方案：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

    </head>

    <body>

        <input id="btn" type="text" placeholder="请输入显示欢迎学习js的次数" >

        <script src="js/jquery-1.12.4.js"></script>

        <script>

            $(document).ready(function(){

                //绑定事件

                $("#btn").focus(study);

                function study(){

                    document.write("<h4>欢迎学习js</h4>")

                }

            })

        </script>

    </body>

</html>

利用jQuery绑定事件，当然使用原生js绑定也是一样的

注：jQuery的ready方法就是等待DOM元素加载完便立即执行，原生js接口onload是等待所有html加载完再加载js文件

onblur事件和onfocus事件失效的更多相关文章

  1. onBlur事件与onfocus事件（js）

      onFocus事件就是当光标落在文本框中时发生的事件. onBlur事件是光标失去焦点时发生的事件. 可以编如下例子 1.html <HTML><HEAD><TITL ...

  2. javascript 的 事件类型（事件）

    事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行. 事件是文档或者浏览器窗口中发生的,特定的交互瞬间. 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都 ...

  3. Js中的onblur和onfocus事件

    html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,这些事件在响应鼠标或键盘动作时都可激发预设的操作.本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用. 一. ...

  4. 巨蟒python全栈开发数据库前端6:事件onclick的两种绑定方式&&onblur和onfocus事件&&window.onload解释&&小米商城讲解

    1.回顾上节内容(JavaScript) 一.JavaScript概述 1.ECMAScript和JavaScript的关系 2.ECMAScript的历史 3.JavaScript是一门前后端都可以 ...

  5. JS事件 失焦事件（onblur）onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。

    失焦事件(onblur) onblur事件与onfocus是相对事件,当光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序. 如下代码, 网页中有用户和密码两个文本框.当前光标 ...

  6. Js中的onblur和onfocus事件应用介绍

    html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用 html页面中,诸如按钮.文本框等可视元素都具有拥有和失 ...

  7. jQuery事件委托之Safari失效的解决办法--摘抄

    什么是事件委托 事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数. //常见的事件绑定(Jquery) ...

  8. iview upload on-format-error 事件 在 before-upload 事件 之后，导致在before里面阻止上传后，监测事件失效，需要自己手工写

    iview upload on-format-error 事件 在 before-upload 事件 之后,导致在before里面阻止上传后,监测事件失效,需要自己手工写

  9. onblur 对象失去焦点事件

    onblur 对象失去焦点事件 一.总结 1.几乎所有的控件都支持onblur事件 二.简介 onblur 事件 Event 对象 定义和用法 onblur 事件会在对象失去焦点时发生. 语法 onb ...

随机推荐

  1. .Net中C# DateTime类的ToString()方法的使用

    Console.WriteLine("ToShortDateString:" + DateTime.Now.ToShortDateString()); Console.WriteL ...

  2. spring boot 运行错误: 找不到或无法加载主类

    在项目根目录运行 mvn clean install 进行重新编译 不行的话就删了原有的启动配置,重新配置启动.

  3. Quartus ii 初学遇到的问题以及解决

    第一次下载和运行Quartus后,发现几个问题: 下载时安装易出现问题. 解决:在官网下载后,在开始破解: 运行程序出现警告:RTL波形时出现问题? 解决:testbench程序出错. 问题3:在视频 ...

  4. 【译】使用 Rust 和 WebAssembly 构建离线画图页面

    原文地址:https://dev.to/sendilkumarn/create-dev-s-offline-page-with-rust-and-webassembly-21gn 原文仓库:https ...

  5. mybatis 查询list，内容为null,但list的size 为1

    List<Integer> cityList = resourcePartnerService.selectCityList(userId); 需要在SQL里where语句加上 字段不为n ...

  6. 图的最短路径算法Dijkstra算法模板

    Dijkstra算法:伪代码 //G为图,一般设为全局变量,数组d[u]为原点到达个点的额最短路径, s为起点 Dijkstra(G, d[u], s){ 初始化: for (循环n次){ u = 是 ...

  7. Linux - cron - 基础

    概述 cron 相关的理解与使用 背景 最近实在没啥写的了 我写东西, 一般是是这些 看了书过后, 做一些系统的整理 比如之前的 docker 和 git 系列 遇到了实际问题, 解决过程也不是那么顺 ...

  8. 【常识】常用RGB颜色对照表

    RGB颜色表 白色:rgb(255,255,255) 黑色:rgb(0,0,0) 红色:rgb(255,0,0) 绿色:rgb(0,255,0) 蓝色:rgb(0,0,255) 青色:rgb(0,25 ...

  9. bootstrap中响应式表格失灵

    当宽度小于768px,由于表格的内容不能填充到出现横向滚动条 单元格内容不够: 出现横向滚动条

  10. 刷题4. Median of Two Sorted Arrays

    一.题目 Median of Two Sorted Arrays,具体请自行搜索. 这个题目,我看了一下,经过一番思考,我觉得实现起来不是很复杂. 但要做到bug free也不难,最大的问题是性能问题 ...