jQuery .focus（）和.blur（）无法在Chrome或Safari中使用 [英] jQuery .focus() and .blur() not working in Chrome or Safari

问题描述

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

I am creating a survey form that needs to have each question and set of answers highlighted (by changing the background color) when the user focuses on them. .focus() and .blur() both work in Firefox and IE, but not entirely in Safari and Chrome. I also tried .focusin() and .focusout() with the same results. Clicking does not fire the focus event, but tabbing through the input fields does. I say not entirely because it works for text inputs, select inputs and textarea inputs; but not radio and checkbox inputs.

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

这适用于与此类似的html块：

This is being applied to blocks of html similar to this:

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

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

I tried messing around with toggles, but I am looking for a more elegant solution that doesn't involve using convoluted logic to make it work. Any ideas?

推荐答案

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

I thought about it on the drive home last night and figured it out on my own, it may not be the most elegant solution, but it certainly works.

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

非常感谢！

这篇关于jQuery .focus（）和.blur（）无法在Chrome或Safari中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！