jQuery .focus () et .blur () ne fonctionnent pas dans Chrome ou Safari

Je suis entrain de créer un formulaire d'enquête qui doit avoir de chaque question et l'ensemble des réponses mises en évidence (en changeant la couleur d'arrière-plan) quand l'utilisateur se concentre sur eux. .focus() et .blur() travaillent tous les deux dans Firefox et IE, mais pas entièrement dans Safari et Chrome. J'ai aussi essayé .focusin() et .focusout() avec les mêmes résultats. EDIT: en Cliquant sur ne déclenche pas l'accent de l'événement, mais la tabulation à travers les champs de saisie. Je dis pas entièrement car elle fonctionne à des entrées de texte, sélectionner les entrées et textarea entrées; mais pas de la radio et de la case des entrées.

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

C'est être appliqué à des blocs de html semblable à ceci:

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

J'ai essayé de déconner avec bascule, mais je suis à la recherche d'une solution plus élégante que de ne pas impliquer l'utilisation de logique alambiquée pour le faire fonctionner. Des idées?

source d'informationauteur Eric

  1. 3

    J'ai aussi rencontré ce problème il y a longtemps, et curieusement il a été un bouton radio me donner le chagrin.

    Essayez d'utiliser jQuery.modifier() au lieu de cela, voici un exemple de travail à partir de ce problème que j'ai eu

    $("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');
});

    Dans le cas où c'est pas clair dans ma folle utiliser des noms de code, input#zendesk-dropbox-askedbefore & input#zendesk-dropbox-newhere sont les deux boutons radio.

  2. 1

    J'ai pensé à la maison en voiture la nuit dernière et compris sur mon propre, il ne peut pas être la solution la plus élégante, mais elle a certainement œuvres.

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

    Merci quand même!

  3. 0
    //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