JavaScript 關于元素獲取焦點(隱藏元素與div)

2019-11-21 00:00:31

字體：大中小

來源：轉載

供稿：網友

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   id="iwvjtn8m0"   class="title">關于元素獲取焦點：</div> <div   id="iwvjtn8m0"   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   id="iwvjtn8m0"   class="title">2，對于div等特殊元素獲取焦點</div> <div   class="iwvjtn8m0"   id="a" >我是DIV元素，我不帶tabindex="-1"。</div> <input type="button" onclick="process1();" value="Div不能獲取焦點"> <div   class="iwvjtn8m0"   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 獲取/設置光標位置,兼容Input&&TextArea

下一篇：jQuery jqgrid 對含特殊字符json 數據的 Java 處理方法