JavaScript 关于元素获取焦点(隐藏元素与div)

更新时间：2011年01月01日 18:09:13 作者：

关于元素获取焦点要注意2个小问题，需要的朋友可以参考下。

1，隐藏元素无法获取焦点
2，对于div等特殊元素获取焦点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>关于元素获取焦点</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> body { margin: 32px; font-family: Verdana, sans-serif; font-size: 14px; } .title { font-size: 18px; font-weight: bolder;margin:40px 0; } </style> </head> <body> <div class="title">关于元素获取焦点：</div> <div class="title">1，隐藏元素无法获取焦点</div> <p>下面有个隐藏的Input:</p> <p style="display:none;"><input class="input" id="textbox" name="textbox" value="Hi,Jb51!!!" /></p> <input type="button" onclick="process0();" value="无法使隐藏元素获取焦点"> <p>解决方法：先把元素显示，在获取焦点。</p> <div class="title">2，对于div等特殊元素获取焦点</div> <div id="a" >我是DIV元素，我不带tabindex="-1"。</div> <input type="button" onclick="process1();" value="Div不能获取焦点"> <div id="b" tabindex="-1">我是DIV元素，我带tabindex="-1",点击下面按钮试试效果。</div> <input type="button" onclick="process2();" value="使Div获取焦点"> <script> function process0(){ var textbox = document.getElementById("textbox"); textbox.onfocus = function(){alert('获取焦点');} textbox.focus(); } function process1(){ var a = document.getElementById("a"); a.onfocus = function(){alert('获取焦点');} a.focus(); } function process2(){ var b = document.getElementById("b"); b.onfocus = function(){alert('获取焦点');} b.focus(); //非常推荐使用 tabindex = -1，基本无副作用！ } </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JavaScript 中比较字符串的 4 种方法示例详解
这篇文章主要介绍了在 JavaScript 中比较字符串的 4 种方法,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-10-10
Javascript与vbscript数据共享
Javascript与vbscript数据共享...
2007-01-01
详解JavaScript的this指向和绑定
JavaScript 中的 new、bind、call、apply 实际这些都离不开 this，因此本文将着重讨论 this，在此过程中分别讲解其他相关知识点。
2020-09-09
js Proxy的原理详解
Proxy用于修改某些操作的默认行为，在目标对象前架设一个“拦截”层，外界对该对象的访问都必须先通过这一层拦截，因此提供了一种机制可以对外界的访问进行过滤和改写。本文就讲讲Proxy的使用
2021-05-05
JavaScript内置对象之Array的使用小结
这篇文章主要介绍了JavaScript内置对象之Array的使用小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
JavaScript中判断网络状态的几种方法
这篇文章主要介绍了如何使用JavaScript的`navigator.onLine`属性和`ononline`、`onoffline`事件来检测浏览器的在线状态,并提供了兼容性代码示例,需要的朋友可以参考下
2025-02-02
Packer 3.0 JS压缩及混淆工具下载
Packer 3.0 JS压缩及混淆工具下载...
2007-05-05
JavaScript对象解构的用法实例解析
解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量,下面这篇文章主要给大家介绍了关于JavaScript对象解构用法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-01-01
javascript的回调函数应用示例
回调函数就是一个通过函数指针调用的函数。下面以示例的方式为大家介绍下其具体的使用
2014-02-02
TypeScript中的方法重载详解
这篇文章主要给大家介绍了关于TypeScript中方法重载的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用TypeScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-04-04

JavaScript 关于元素获取焦点(隐藏元素与div)

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具