jquery不會重點回到元素

我有以下代碼來檢查用戶的文本是否不包含兩個禁止的字符，它確實按照我想要的方式。問題在於，對於包含禁止字符的文本，我想在警報關閉後專注於輸入。但是CSS樣式應用於輸入。jquery不會重點回到元素

我在這段代碼中遺漏了什麼？而blur事件冒泡DOM樹，纔得到了徹底解決執行

$(".option, .fixed").blur(function(){ 
    var str = $(this).val(); 
    if(str.indexOf("|") >= 0 || str.indexOf(":") >= 0) { 
     alert("The informatin you provided contains illegal characters(| :)");  
    } 
    $(this).css('border','1px solid pink').focus(); 
});

來源

2013-05-29 goseo

您的代碼。只有當事件觸及堆棧底部並由瀏覽器處理時，該元素纔會失去焦點。

如果在該函數中調用.focus()，則focus動作將被執行，然後blur動作將被恢復，原始輸入將最終失去焦點。

在瀏覽器處理完blur之後，您需要有focus觸發器。

您可以使用setTimeout：

$(".option, .fixed").blur(function(){ 
    var str = $(this).val(); 
    if(str.indexOf("|") >= 0 || str.indexOf(":") >= 0) { 
     alert("The informatin you provided contains illegal characters(| :)");  
    } 
    $(this).css('border','1px solid pink'); 

    var that = this; 
    setTimeout(function(){ $(that).focus() }, 0); 
});

但是，你應該知道的鏈接到該模式的問題：給focus到一個節點可以在另外一個觸發blur，並導致一個奇怪的/壞gui行爲。

下面是一個例子（jsfiddle here）：

點擊第一個輸入，然後外面：你將看到所期望的行爲，
點擊第一個輸入，然後在第二：你會有無限的blur/focus循環，以及不可用的gui。

避免這種情況的最簡單方法是突出顯示該字段，顯示錯誤消息，並讓焦點成爲焦點。

來源

2013-05-29 07:01:33 LeGEC

能否請您解釋一下我是如何把這個代碼？因爲我以幾種不同的方式嘗試了這一點，並且無法得到任何結果！ – goseo

用提到的@LeGEC代碼行替換'$（this）.css（'border'，'1px solid pink'）。focus（）;'。 –

謝謝LeGEC！非常好的一點！ – goseo

一個小暢LeGEC的解決方案適合我的情況：

$(".option, .fixed").blur(function(){ 
    var str = $(this).val(); 
    if(str.indexOf("|") >= 0 || str.indexOf(":") >= 0) { 
     alert("The informatin you provided contains illegal characters(| :)"); 
     $(this).css('border','1px solid pink'); 
     var that = this; 
     setTimeout(function(){ that.focus() }, 0); 
    }else{ 
     $(this).css('border','1px solid #ccc'); 
    } 
});

來源

2013-05-29 08:01:23 goseo

jquery不會重點回到元素

回答

相關問題