【JavaScript】focus()方法
阿新 • • 發佈：2019-01-27
在JavaScript中，focus()雖然比較罕見，但還是比較有用的，
主要是用於獲取焦點，說白了，就是自動把游標放到此元件上面，無須使用者再次操作。
直接用一個例子說明問題：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>self_focus</title> <script type="text/javascript"> window.setTimeout(function(){ window.self.focus();//僅在IE中適用 document.getElementById("text_2").focus(); }, 5000); </script> </head> <body> <input type="text" id="text_1" /><input type="text" id="text_2" /> </body> </html>
上述程式碼，設定在開啟網頁5秒之後，無須使用者操作，focus()方法會自動將游標放到id為text_2這個文字框，在IE的執行效果如下：
在野狐禪的執行效果如下：
在IE中，window.self.focus();還會起作用。5秒後，視窗還會自動獲得焦點，切換到其他視窗，或者其他程式，等5秒，IE瀏覽器還會自動返回到前臺，成為活動視窗，而在野狐禪等其他瀏覽器中不適用。火狐、谷歌等為了安全性，設定瀏覽器無法實現控制使用者行為。在其他程式應用時，讓瀏覽器獲取視窗焦點這個是無法做到的。最少在瀏覽器內部js無法做到。 不過對於chrome或者firefox，safari之類的瀏覽器可以用過Notification這個類來做一個彈出通知。然而notification必須要支援html5，太麻煩。目前要求視窗獲取焦點，基本上用alert去實現。
由於IE的window.self.focus();是其作用的，不被禁止的，配合onblur()獲取焦點事件，還能構造一個死迴圈，讓IE崩潰，如下的程式碼：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>endless_loop_blur</title> </head> <body> <input type="text" onBlur="endless_loop();" id="text1"> </body> </html> <script type="text/javascript"> window.self.focus(); document.getElementById("text1").focus(); function endless_loop(){ document.getElementById("text1").focus(); } </script>
執行效果如下：
開始先在將游標放到text1這個文字框，之後馬上觸發對話方塊的onblur獲取焦點事件呼叫endless_loop函式，繼續不停地將游標放到text1這個文字框，當然此處的程式碼，寫成self.focus()也是可以的，此處的self特指text1這個文字框。
上述死迴圈在野狐禪、谷歌等瀏覽器不適用，相當於無限的alert()被禁止一樣。