J'ai quelque chose comme ça dans jQuery

if($("input").is(":focus")){
// do something
}

Il a un effet sur l'entrée focalisée comme il se doit. Cependant, lorsque je passe à une nouvelle entrée qui obtient le focus à la place, la première est celle qui a toujours cet effet et non la nouvelle. Quelle serait une bonne façon de la mettre à jour automatiquement pour que celle qui est actuellement focalisée ait l'effet? Merci!

2
Radza Milic 9 mars 2016 à 18:41

4 réponses

Meilleure réponse

"Faites quelque chose" sur le focus; "Annuler cette chose" sur le flou

Votre exemple ne s'exécute qu'une seule fois et ne cible qu'un seul input: celui avec focus. Il ne répond pas aux changements.

Utilisez la méthode .on() de jQuery pour lier des écouteurs d'événements qui peuvent répondre aux modifications.

Un exemple de base:

$('input').on('focus', function () {
  // do something
  $(this).css('background-color','yellow');
});

$('input').on('blur', function () {
  // do something
  $(this).css('background-color','white');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" />
<input type="text" />

Un autre exemple utilisant le chaînage:

$('input')
  .on('focus', function () {
    $(this).addClass('highlight');
  })
  .on('blur', function () {
    $(this).removeClass('highlight');
  });
input.highlight {
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" />
<input type="text" />

Un autre exemple utilisant une liste d'événements séparés par des espaces:

$('input')
  .on('focus blur', function () {
    $(this).toggleClass('highlight');
  });
input.highlight {
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" />
<input type="text" />
1
gfullam 9 mars 2016 à 15:59

Est-ce que cela aide?

$('input').on('focusin' function(){
  $(this).toggleClass('someClass')
});
$('input').on('focusout' function(){
  $(this).toggleClass('someClass')
});
0
Mihai Farcas 9 mars 2016 à 15:51

Si vous utilisez jQuery, vous pouvez attacher des gestionnaires d'événements aux événements de focus et de flou.

http://api.jquery.com/category/events/form-events/

$(someSelector).on('focus', function(evt) { 
//do stuff
})

Et

$(someSelector).on('blur', function(evt) { 
//do stuff
})

Notez que vous pouvez utiliser focusin et focusout si vous avez besoin d'écouter la propagation d'événements.

0
Michael Oakley 9 mars 2016 à 15:53

Vous pouvez utiliser une règle CSS3 simple:

input:focus {
  background-color: red;
}
3
AlanShearer 9 mars 2016 à 15:55