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

回答

相关问题