先看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. socket 简单实现HTTP服务器

    # -*- coding: utf-8 -*- # @Time : 2019-07-17 1:39 # @File : 网络socket实现http服务器.py # @Software: PyChar ...

  2. 基于PO和单例设计模式用python+selenium进行ui自动化框架设计

    一)框架目录的结构 二)config包当中的config.ini文件主要是用来存项目的绝对路径,是为了后续跑用例和生成测试报告做准备然后目前的配置文件大都会用yaml,ini,excel,还有.py也 ...

  3. NW.js桌面应用开发（一）

    NWjs中文网 Electron中文网 一些需要了解的历史与特性,其实就是 NW.js 和 Electron的争议,建议还是亲自阅读一下各自的官网说明 1.下载SDK版工具 从淘宝NPM镜像下载,速度 ...

  4. 1-Django2.2安装指南

    django快速安装指南 作为一个Python Web框架,Django需要Python环境.下面是Django需要对应的python版本. Django版本 python版本 1.11 2.7, 3 ...

  5. 数据存储 csv

    # # 保存csv格式的数据import csv csvFile = open('test.csv','w+',newline='') #文本方式可读写 try: writer = csv.write ...

  6. 【游记】CSP-J2019谔谔记

    结果果然不能把希望寄托在渺茫的玄学上,实力不够还是不要渴求什么奇迹了. ----2020.2.21记 Day -6 考场就在我市,所以东道主应该运气会好一点吧. Day -1 听说本来准备上的中学准备 ...

  7. 下载图片（vue 下载图片）

    downloadImg(){ const url = this.imgUrl // window.open(_this.detail.imgUrl) let xmlhttp=new XMLHttpRe ...

  8. iview渲染函数

    <Table border :columns="discountColumns" :data="discountData.rows"></Ta ...

  9. NPOI 导出Excel表报错

    当导出2007格式的时候,打开文件总是报错“发现 xxx中的部分内容有问题.是否让我们尽量尝试恢复?”. 导出的程序: protected void btnValidateInternalData_C ...

  10. Git 把码云上被fork项目源码merge到fork出来的分支项目

    Git 把码云上被fork项目源码merge到fork出来的分支项目 By:授客 QQ:1033553122 需求描述 被fork的项目有更新代码,希望把更新的代码merge到fork分支项目 解决方 ...