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

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 关于元素获取焦点(隐藏元素与div)

您可能感兴趣的文章: