火狐瀏覽器下focus()無法第二次獲取焦點

螞蟻小編發表於2017-03-25
瀏覽器

大家知道使用focus()函式可以讓一個元素獲取焦點，比較常見的一個用法就是在表單驗證的時候，如果當前表單沒有通過檢驗，那麼就讓此表單元素獲取焦點，雖然這是一個讓人感覺稀鬆稀鬆平常的程式碼，但是在火狐瀏覽器下可能會出現意外，先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){
  var otxt=document.getElementById("txt");
  otxt.focus();
  otxt.onblur=function(){
    if(otxt.value==""){
      alert("abc");
      otxt.focus();
    }
  }
}
</script>
</head>
<body>
<input type="text" id="txt"/>
</body>
</html>

在上面的程式碼中，如果文字框內容為空就失去焦點，那麼就彈出一個提示框，然後點選確定之後，又會獲取焦點，這在IE和谷歌瀏覽器中沒有任何問題，但是在火狐瀏覽器中，第一次載入的時候獲取焦點沒問題，但彈出警告框之後無法獲取焦點，解決方案如下:

[JavaScript] 純文字檢視 複製程式碼
alert("abc");
otxt.focus();
setTimeout(function(){otxt.focus()},0);

將事件處理函式中最後的獲取焦點的程式碼做一下修改即可。

相關文章