onblur事件和onfocus事件失效

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

<element οnblur="SomeJavaScriptCode">

<element οnfοcus="SomeJavaScriptCode">

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

在看几个例子：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><input name="btn" type="text" placeholder="请输入显示欢迎学习js的次数" οnfοcus="study(prompt('请输入显示欢迎学习js的次数'))" ><script>function study(count){for(var i=0;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的次数" οnfοcus="study(prompt('请输入显示欢迎学习js的次数'))" ><script>$(document).ready(function study(count){for(var i=0;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事件失效相关推荐

js常用对象：点击、双击、onload事件、鼠标相关、onblur事件和onfocus事件等；通过循环给多个元素添加事件、通过addEventListener() 方法监听事件函数...
1.通过标签内部添加事件 (1)onclick事件:单击事件 (2)ondbclick事件:双击事件 (3)onload事件:只能在body中使用,入口函数里有:window. .οnlοad=f ...
解决onBlur事件与onfocus事件冲突问题
注册新用户为确保用户名唯一性需要一个onBlur事件确保用户名唯一如果出现用户注册中途撤销点击关闭按钮也会触发onBlur事件解决onBlur事件与onfocus事件冲突就需要在''关闭'' ...
JS的onBlur事件与onfocus事件
html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,这些事件在响应鼠标或键盘动作时都可激发预设的操作.本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用. 一. ...
onBlur事件与onfocus事件（js）
onFocus事件就是当光标落在文本框中时发生的事件. onBlur事件是光标失去焦点时发生的事件. 可以编如下例子 1.html <HTML> <HEAD> <TITL ...
onBlur事件与onfocus事件（js）
jQuery 参考手册 - 事件一.jQuery的 onBlur方法定义和用法 1.当元素失去焦点时发生 blur 事件. 2.blur() 函数触发 blur 事件,或者如果设置了 functi ...
onBlur事件与onfocus事件
onFocus事件就是当光标落在文本框中时发生的事件. onBlur事件是光标失去焦点时发生的事件. 可以编如下例子 1.html <HTML> <HEAD> <TI ...
input js 离开事件_onBlur事件与onfocus事件（js）（光标到达和离开是触发事件）...
[1.回车键触发事件的js代码在文本框中输入完内容后,经常需要按回车,焦点跳到下个文本框,或者触发按钮事件判断是否按下的为回车非常简单:function EnterPress(){ i o ...
onBlur事件与onfocus事件（jquery）
onblur 事件会在对象失去焦点时发生,主要用于检查from表单中的必要数据是否为空. <input type="text" id="name" nam ...
onBlur和onfocus事件
往往在做网页的时候会遇到要对一些表单控件做一些定制的背景渲染,下面一些关于文本框的onBlur和onfocus事件.此Demo是实现了当文本框获得焦点的时候输入背景为"黄色",当文 ...

onblur事件和onfocus事件失效

onblur事件和onfocus事件失效相关推荐

最新文章

热门文章