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需再刷新一下页面才能执行]

您可能感兴趣的文章:

js实现点击图片自动提交action的简单方法
下面小编就为大家带来一篇js实现点击图片自动提交action的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
原生JS实现列表内容自动向上滚动效果
这篇文章主要介绍了原生JS实现列表内容自动向上滚动效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-05-05
js判读浏览器是否支持html5的canvas的代码
浏览器是否支持html5的canvas,我们可以使用js来判断下，具体如下，喜欢的朋友可以收藏
2013-11-11
js 方法实现返回多个数据的代码
2009-04-04
JavaScript加强之自定义callback示例
callback回调函数在本文以自定义的方式出现，感兴趣的朋友可以参考下，希望对大家有所帮助
2013-09-09
JS遍历页面所有对象属性及实现方法
下面小编就为大家带来一篇JS遍历页面所有对象属性及实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
一文彻底理解js原生语法prototype,__proto__和constructor
作为一名前端工程师,必须搞懂JS中的prototype、__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,下面这篇文章主要给大家介绍了关于js原生语法prototype,__proto__和constructor的相关资料,需要的朋友可以参考下
2021-10-10
bootstrap fileinput完整实例分享
这篇文章主要为大家分享文件上传组件bootstrap fileinput完整实例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
js实现表格拖动选项
这篇文章主要为大家详细介绍了原生js实现表格拖动选项，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
js获取元素的标签名实现方法
下面小编就为大家带来一篇js获取元素的标签名实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10