JavaScript使用focus()設定焦點失敗的解決方法_javascript技巧

昨天修改機上盒上面的EPG頁面，遇到一個小問題。用戶購買遊戲時需要跳出購買確認對話框，對話框的預設焦點規定必須停留在「取消」按鍵上。很簡單的需求，使用JavaScript的focus()方法就可以實現了。簡單的程式碼範例如下：

document.getElementById("cancel").focus()

但是苦逼的是，機上盒真是個大坑。由於要相容於所有現存的機上盒型號，需要對8款機上盒進行適配。然後就出現問題了！一款中興B600的機上盒完全沒辦法將焦點設定到取消按鍵。以下是我的解決思路：

首先確認該機上盒是否支援getElementById()方法以及是否成功獲得了ID為「cancel」的元素：測試方法很簡單，直接另寫了一個

test

，然後在同樣的地方取得ID為「test」的元素，並進行了簡單的操作document.getElementById("test").innerHTML="Hello"
最後使用了「try...catch(e)...」捕捉「focus()」失敗的原因

try(){ 
<span style="white-space:pre"> </span>document.getElementById("cancel").focus() 
}catch(e){ 
<span style="white-space:pre"> </span>alert(e.name + ": " + e.what()); 
}

但是就是很奇怪！以上兩步驟的結果顯示該機上盒支援focus()和getElementById()，但就是無法設定焦點到彈出的對話框中。

前前後後折騰了一個多小時，最後大BOSS出現了，就簡單說了一句話就解決了這個問題！有可能要主動呼叫flur()將原來的焦點取消掉！

document.getElementById("purchase").flur()

然後就解決了這個問題。不得不感概！在解決這個問題的過程中，自己的思路其實還蠻正確的，但知識面顯然不夠。一般程式設計師和高階程式設計師的差距除了解決問題的思路方面，也有經驗和知識面的差距！