jQuery .focus（）和.blur（）无法在Chrome或Safari中使用

Question

我正在创建一个调查表单，当用户关注它们时，需要突出显示每个问题和一组答案（通过更改背景颜色）。 .focus（）和.blur（）都可以在Firefox和IE中使用，但不能完全在Safari和Chrome中使用。 我也尝试了.focusin（）和.focusout（），结果相同。 编辑：单击不会触发焦点事件，但通过输入字段进行选项卡。 我说并不完全是因为它适用于文本输入，选择输入和textarea输入; 但不是收音机和复选框输入。

$(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>

我试着搞乱切换，但我正在寻找一个更优雅的解决方案，不涉及使用复杂的逻辑来使其工作。 有任何想法吗？

Answer 1

我很久以前也遇到过这个问题，奇怪的是它是一个单选按钮让我感到悲伤。

尝试使用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都是单选按钮。

Answer 2

我昨晚在开车回家的时候想过这件事并且我自己想出来，它可能不是最优雅的解决方案，但它确实有效。

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

不管怎么说，还是要谢谢你！

Answer 3

// 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