JavaScript 关于元素获取焦点(隐藏元素与div) 时间:2020-05-12 人气:0 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>关于元素获取焦点：</div> <div>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>2，对于div等特殊元素获取焦点</div> <div>我是DIV元素，我不带tabindex="-1"。</div> <input type="button" onclick="process1();" value="Div不能获取焦点"> <div>我是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需刷新才能执行] 加载全部内容