jquery blur後focus取得不到焦點的解決辦法

一：很多童鞋可能會遇到這種情況：

jquery的blur之後,focus獲取不到焦點。

二：使用場景：

使用者填寫資訊的時候，若郵件信箱為空，則提示請填寫信箱，並將遊標置於填寫信箱的文字方塊裡，方便使用者的再次輸入。

想當然的我們會使用jquey的blur()和focus()兩個函數來實現上面的需求：

$("#email").blur(function(){       if($("#email").val()==''){
            alert('请填写您的邮箱');
            $("#email").focus();    
       }    
})

三：程式碼解釋：

當填寫email的文字方塊失去焦點時，如果填寫的郵箱為空，則彈出'請填寫您的郵箱' 的提示，並重新獲得該文字方塊的焦點，方便使用者重新輸入。

在FF上運行test.html後：會發現，彈框是彈出來了，但是卻獲取不到焦點，很是奇怪吧，程式碼明顯沒有錯誤呀，在IE上面運行結果正常，既有彈出訊息，也會獲得焦點。

四：那你一定就會想到了，這又是一個相容的問題了。

是的。 FF和IE在相容性方面的確給我們帶來了很多麻煩。

五：出現問題的原因應該是FF和IE的關於blur和focus的機制不一樣導致。

FF的focus只能在blur之前。

六：那該怎麼解決這個bug呢？

使用 settimeout做個延遲即可。

修改程式碼如下：

$("#email").blur(function(){    if($("#email").val()==''){
        alert('请填写您的邮箱');        //$("#email").focus();
        window.setTimeout (function(){ document.getElementById ('email'). select();},0 );     
    }    
})

七：分別在IE和FF上面運行，完美相容。

以上是jquery blur後focus取得不到焦點的解決辦法的詳細內容。更多資訊請關注PHP中文網其他相關文章！