【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()被禁止一樣。