javascript hasFocus使用实例
更新时间：2010年06月29日 00:12:19 作者：
hasFocus是document的特有方法．用来判断当前网页是否获得焦点．
如果网页处于焦点状态返回true,否则返回fasle
什么是焦点？焦点是指用户是否活动在该页面．确切的说鼠标是否在该网页内活动．或者说该网页中的内容是否有被选中的，或者光标存在于该页的某个元素内．如果具备其中一个条件那么该页就处于焦点状态．注意hasFocus方法只针对网页不针对浏览器．下面的实例中．你用鼠标点击网页时候．该网页处于焦点状态．你用鼠标点击浏览器的地址栏以后．该网页失去焦点并显示false． 再次提醒hasFocus方法只能运行在document对像．请看下面实例
<html>
<head>
<title>Dom:hasFocus方法实例</title>
</head>
<body onfocus="getFocus()" onblur="Empty_Focus()">
<h2>请点击网页区域．表明该网页获得焦点,显示为true.点击浏览器地址栏．该网页失去焦点显示为false</h2>
<hr/>
<a href="https://www.jb51.net" onfocus="getFocus()">脚本之家</a>
<span id="c"></span>
<script language="javascript">
function getFocus(){
document.getElementById("c").innerHTML = document.hasFocus();
}
function Empty_Focus(){
document.getElementById("c").innerHTML = document.hasFocus();
}
</script>
</body>
</html>
什么是焦点？焦点是指用户是否活动在该页面．确切的说鼠标是否在该网页内活动．或者说该网页中的内容是否有被选中的，或者光标存在于该页的某个元素内．如果具备其中一个条件那么该页就处于焦点状态．注意hasFocus方法只针对网页不针对浏览器．下面的实例中．你用鼠标点击网页时候．该网页处于焦点状态．你用鼠标点击浏览器的地址栏以后．该网页失去焦点并显示false． 再次提醒hasFocus方法只能运行在document对像．请看下面实例
复制代码 代码如下:
<html>
<head>
<title>Dom:hasFocus方法实例</title>
</head>
<body onfocus="getFocus()" onblur="Empty_Focus()">
<h2>请点击网页区域．表明该网页获得焦点,显示为true.点击浏览器地址栏．该网页失去焦点显示为false</h2>
<hr/>
<a href="https://www.jb51.net" onfocus="getFocus()">脚本之家</a>
<span id="c"></span>
<script language="javascript">
function getFocus(){
document.getElementById("c").innerHTML = document.hasFocus();
}
function Empty_Focus(){
document.getElementById("c").innerHTML = document.hasFocus();
}
</script>
</body>
</html>
相关文章
用javascript模仿ie的自动完成类似自动完成功的表单
最近在写一个javascript框架,看见网上有不少自动完成功能的表单,于是用javascript写了一个，需要的朋友可以参考下2012-12-12
本篇文章主要介绍了谈谈第三方App接入微信登录 解读 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧。2016-12-12
这篇文章主要介绍了JS事件循环-微任务-宏任务的原理，本文章含有面试题分析，不管是面试者还是想要学习相关内容的都可以很好的理解、掌握这部分内容,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了jQuery实现动态添加、删除按钮及input输入框的方法,涉及jQuery事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下2017-04-04
这篇文章主要为大家详细介绍了js本地图片预览实现代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了javaScript 事件冒泡,事件捕获和事件委托的相关资料,需要的朋友可以参考下，希望能够给你带来帮助2021-11-11
这篇文章主要介绍了如何基于js判断浏览器版本,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了js实现整体缩放页面适配移动端，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
这篇文章主要给大家分享的是学习JavaScript一定要知道的3个小技巧，通常在 Angular 或 React 项目中，code review 时看到一些老式的 JavaScript 代码，就会将开发人员归类为初学者，下面我们就来一起看看初学者需要知道的三个小技巧,需要的朋友可以参考一下2021-12-12
这篇文章主要为大家详细介绍了p5.js临摹动态图形的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
最新评论