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   id="bxlltff"   class="title">關于元素獲取焦點：</div> <div   id="xrtdf7v"   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="fzx71zh"   class="title">2，對于div等特殊元素獲取焦點</div> <div   class="zrhpbtp"   id="a" >我是DIV元素，我不帶tabindex="-1"。</div> <input type="button" onclick="process1();" value="Div不能獲取焦點"> <div   class="hb7ht7x"   id="b" tabindex="-1">我是DIV元素，我?guī)abindex="-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需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

JavaScript?中比較字符串的?4?種方法示例詳解
這篇文章主要介紹了在?JavaScript?中比較字符串的?4?種方法,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-10-10
Javascript與vbscript數據共享
Javascript與vbscript數據共享...
2007-01-01
詳解JavaScript的this指向和綁定
JavaScript 中的 new、bind、call、apply 實際這些都離不開 this，因此本文將著重討論 this，在此過程中分別講解其他相關知識點。
2020-09-09
js Proxy的原理詳解
Proxy用于修改某些操作的默認行為，在目標對象前架設一個“攔截”層，外界對該對象的訪問都必須先通過這一層攔截，因此提供了一種機制可以對外界的訪問進行過濾和改寫。本文就講講Proxy的使用
2021-05-05
JavaScript內置對象之Array的使用小結
這篇文章主要介紹了JavaScript內置對象之Array的使用小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-05-05
JavaScript中判斷網絡狀態(tài)的幾種方法
這篇文章主要介紹了如何使用JavaScript的`navigator.onLine`屬性和`ononline`、`onoffline`事件來檢測瀏覽器的在線狀態(tài),并提供了兼容性代碼示例,需要的朋友可以參考下
2025-02-02
Packer 3.0 JS壓縮及混淆工具下載
Packer 3.0 JS壓縮及混淆工具下載...
2007-05-05
JavaScript對象解構的用法實例解析
解構賦值允許你使用類似數組或對象字面量的語法將數組和對象的屬性賦給各種變量,下面這篇文章主要給大家介紹了關于JavaScript對象解構用法的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-01-01
javascript的回調函數應用示例
回調函數就是一個通過函數指針調用的函數。下面以示例的方式為大家介紹下其具體的使用
2014-02-02
TypeScript中的方法重載詳解
這篇文章主要給大家介紹了關于TypeScript中方法重載的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用TypeScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-04-04