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,超强推荐base.js
脚本吧 - 幻宇工作室用到js,超强推荐base.js...
2006-12-12
Javascript简单改变表单元素背景的方法
这篇文章主要介绍了Javascript简单改变表单元素背景的方法,涉及javascript操作页面元素样式的基本技巧,非常简单实用,需要的朋友可以参考下
2015-07-07
js最全的数组的降维5种办法(小结)
这篇文章主要介绍了js最全的数组的降维5种办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
浅析JavaScript中的特殊数据类型
在JavaScript中，有6大数据类型，分别包括string,number,boolean,undefined,null 和 object。下面通过通过本文给大家介绍JavaScript中的特殊数据类型，需要的朋友参考下吧
2017-12-12
JavaScript canvas实现水球加载动画
这篇文章主要为大家详细介绍了JavaScript canvas实现水球加载动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
微信小程序WebSocket实现聊天对话功能
这篇文章主要为大家详细介绍了微信小程序WebSocket实现聊天对话功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-07-07
JS区分浏览器页面是刷新还是关闭
在web开发中我们经常各种各样的需求。今天小编给大家介绍JS区分浏览器页面是刷新还是关闭标签页，非常实用，感兴趣的童鞋参考下吧
2016-04-04
bootstrap-table formatter 使用vue组件的方法
Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。这篇文章重点给大家介绍bootstrap-table formatter 使用vue组件的方法，感兴趣的朋友一起看看
2019-05-05
webpack中使用iconfont字体图标的方法
下面小编就为大家分享一篇webpack中使用iconfont字体图标的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
封装的dialog插件基于bootstrap模态对话框的简单扩展
这篇文章主要介绍了基于bootstrap模态对话框的简单扩展，bootstrap-mzDialog插件的封装，感兴趣的小伙伴们可以参考一下
2016-08-08