jQuery .focus（）和.blur（）不適用於Chrome或Safari

我正在創建一個調查表單，當用戶關注它們時需要突出顯示每個問題和一組回答（通過更改背景顏色）。 .focus（）和.blur（）都可以在Firefox和IE中使用，但在Safari和Chrome中，並不完全是。我也嘗試過.focusin（）和.focusout（），結果相同。 編輯：單擊不會觸發焦點事件，但通過輸入字段切換。我說不完全，因爲它適用於文本輸入，選擇輸入和textarea輸入;但不包括收音機和複選框輸入。jQuery .focus（）和.blur（）不適用於Chrome或Safari

$(document).ready(function() 
{ 
    $("form li").focusin(function() 
    { 
    $(this).addClass("over"); 
    }).focusout(function() 
    { 
    $(this).removeClass("over"); 
    }); 
});

這被應用到與此類似HTML的塊：

<li> 
    <label for="webmail" class="desc">Email</label> 
    <input type="text" name="webmail" id="webmail" /> 
</li> 
<li> 
    <label for="business" class="desc">Purpose of your Charter Flight:</label> 
    <div> 
     <span> 
      <input type="radio" name="purpose" id="business" class="radio" /> 
      <label class="choice" for="business">Business</label> 
     </span> 
     <span> 
      <input type="radio" name="purpose" id="pleasure" class="radio" /> 
      <label class="choice" for="pleasure">Pleasure</label> 
     </span> 
    </div> 
</li>

我試圖切換瞎搞，但我正在尋找一個更優雅的解決方案，不使用令人費解的邏輯包括使其工作。有任何想法嗎？

來源

2010-07-27 Eric

如果'blur（）'不起作用，請嘗試創建一個虛擬輸入元素，將其粘貼到頁面某處並對其調用'focus（）'。 – Warty 2010-07-27 22:01:09

昨天晚上我在回家的路上想到了這件事，並且自己想清楚了，它可能不是最優雅的解決方案，但它確實有效。

$(document).ready(function() 
    { 
     $("textarea, input, select, .radio, .checkbox").click(function() 
     { 
      $("form li.over").toggleClass("over"); 
      $(this).parents("li").toggleClass("over"); 
     }); 
    });

還是謝謝！

來源

2010-07-28 13:10:27 Eric

您還應該將相關的點擊事件添加到輸入值的標籤中，以及當用戶使用標籤導航表單時會發生什麼？ – jakeisonline 2010-07-28 21:58:52

你能澄清你的意思是相關的點擊事件嗎？你的意思是將onclick屬性添加到標籤？另外，爲什麼？我對整個JavaScript的東西都很陌生，所以任何幫助都很有用！如果.blur（）和.focus（）在webkit中的鼠標單擊上正常工作，但是客戶希望它在單擊它時工作，我會喜歡它。您是否知道添加.focus（）和.blur（）功能的優雅方式，而無需再次使用這些事件處理程序重複代碼？ – Eric 2010-08-02 19:37:06

正如@jakeisonline所指出的那樣，當用戶使用標籤或點擊標籤時，你會遇到麻煩，這是通過表單導航的兩種標準方式。我建議離開焦點事件的文本輸入和添加更改事件的收音機和複選框，因爲我建議作爲另一個答案的評論。 – 2011-11-22 16:42:32

我很久以前也遇到過這個問題，奇怪的是，這是一個單選按鈕，給我帶來了悲傷。

嘗試使用jQuery.change()相反，這裏是從問題的工作示例我有

$("input#zendesk-dropbox-askedbefore, input#zendesk-dropbox-newhere").change(function() { 
    $("label#zendesk-dropbox-label-askedbefore, label#zendesk-dropbox-label-newhere").toggleClass('zendesk-dropbox-label-highlight'); 
});

在情況下，它是從我的瘋狂使用ID名稱不清，input#zendesk-dropbox-askedbefore & input#zendesk-dropbox-newhere都是單選按鈕。

來源

2010-07-27 22:34:54 jakeisonline

感謝您的幫助，但我最終發現了自己的想法。對於選擇，收音機和複選框，這絕對是個好消息。它對文本字段和textareas的使用有限，因爲事件在你退出焦點到字段後觸發，這不是我正在尋找的內容，但肯定可以用來強制單選按鈕和複選框在Chrome中工作/ Safari – Eric 2010-07-28 21:38:30

我遇到了同樣的問題，文本輸入和無線電輸入事件「焦點」，但收音機沒有在Webkit中觸發此事件，所以這些事件都放在「更改」事件上。現在我有兩個事件，文本輸入的「焦點」和收音機的「更改」，都調用相同的回調。 – 2011-11-22 16:13:28

// In js area write following method 
$('#chkRikin').focus(function() { 
alert('Say Hi Rikin'); 
}); 


// in html area write following code anenter code hered test it your self 
<input type="checkbox" onclick="this.focus()" onblur="yourMethod()" /> 

it works in google crom

來源

2013-04-05 08:40:30

jQuery .focus（）和.blur（）不適用於Chrome或Safari

回答

相關問題