jQuery .focus() и.blur() не работают в Chrome или Safari

Я создаю форму опроса, в которой каждый вопрос и набор ответов должны быть выделены (путем изменения цвета фона), когда пользователь фокусируется на них. .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>

Я пытался возиться с переключателями, но я ищу более элегантное решение, которое не предполагает использования сложной логики, чтобы заставить его работать. Есть идеи?

Источник

3 ответа

Решение

Я думал об этом по дороге домой вчера вечером и понял это сам, это может быть не самое элегантное решение, но оно, безусловно, работает.

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

Спасибо, в любом случае!

Источник

Я также столкнулся с этой проблемой давным-давно, и, как ни странно, это была кнопка радио, дающая мне горе.

Попробуйте использовать 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');
});

В случае, если это неясно из моего сумасшедшего использования имен, input#zendesk-dropbox-askedbefore & input#zendesk-dropbox-newhere обе кнопки радио.

Источник 
// 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
Источник
Другие вопросы по тегам