Google Chrome не запускает событие размытия на переключателях?

Question

Это мой первый пост здесь - всем привет

В настоящее время я разрабатываю HTML-форму с поддержкой CSS и JQuery. Форма будет использоваться "неопытными пользователями", поэтому я сфокусирован на удобстве использования. Поэтому я даю подсказку для каждого поля ввода с дальнейшими инструкциями. Чтобы показать подсказки, я использую событие javascript onfocus / onblur, поэтому отображается только одна подсказка за раз. Это работало хорошо, когда у меня были только поля ввода type="text", но с полями ввода type="radio" Я испытываю проблемы в Google Chrome.

Я сделал быстрый пример на http://jsfiddle.net/54y69/1/, чтобы вы могли понять, что я имею в виду. Код там очень похож на код, который я использую в своей форме, поэтому я не стал размещать его здесь. Предупреждение появляется во всех браузерах, которые я тестировал, за исключением Google Chrome. Интересно, почему? Есть какое-нибудь известное решение или обходной путь?

Answer 1

Рабочий образец:

$('input').on({
    click: function (e) {
        this.focus();
        $('#' + this.id + 'msg').show();
    },
    blur: function (e) {
        $('#' + this.id + 'msg').hide();
    }
});

Answer 2

Из причудливого режима:

Safari и Chrome не запускают события фокусировки / размытия, когда пользователь использует мышь для доступа к флажкам, радио или кнопкам. Текстовые поля, текстовые поля и поля выбора работают правильно.

Есть несколько предложений, чтобы обойти это здесь.

Answer 3

blur будет работать на определенных версиях Chrome (но не на моей 10.0.648.205), но только если вы отойдете от всей коллекции элементов. Не уверен, что это полезно, но это будет работать:

$('input:radio').click(function() {
    alert('why does this not show up in google chrome?!');
});

НТН.