Comment changer le style d'un élément / conteneur lorsque le focus est & # 8220; à l'intérieur & # 8221; il?

Question

Supposons avoir un code comme celui-ci:

<div class="notSelected">
      <label>Name
          <input type="text" name="name" id="name" />
      </label> 
      <div class="description">
          Tell us what's your name to make us able to fake to be your friend 
          when sending you an email.
      </div>
</div>

Supposons maintenant que j'ai quelque chose comme ceci (c'est juste un exemple) pour chaque élément d'un formulaire. J'aimerais changer le style de notSelected à Selected lorsque:

• L'utilisateur se concentre sur l'élément d'entrée
• L'utilisateur déplace la souris sur un div non sélectionné

Lorsqu’il change de focus, le div sélectionné doit devenir non sélectionné à nouveau.

J'aimerais faire quelque chose comme ceci pour augmenter la taille du texte du div sélectionné. Quoi qu’il en soit, cela pourrait être cool d’apporter d’autres modifications, aussi je préférerais changer l’attribut de classe.

Quel est le meilleur moyen de faire quelque chose comme ça en JavaScript? Existe-t-il un framework JavaScript qui puisse me motiver à faire cela? Il sera donc facile d’ajouter des effets tels que la décoloration, etc ...

J'ai téléchargé MooTools, mais avec une lecture rapide de la documentation, je ne voyais pas comment faire cela sans avoir d’identifiant spécifique pour l’un des formulaires div, mais c’est la première fois que je l’utilise. Je n'ai aucun problème à utiliser un autre cadre, mais si vous en suggérez un, écrivez également ce que je devrais rechercher spécifiquement.

Answer 1

Je vous conseillerais de regarder jQuery pour votre tâche. Il est assez facile à apprendre et produit rapidement de beaux effets. Mais votre seul effet décrit, JavaScript pur suffirait également.

Faites en sorte que vos DIV aient toujours une classe appelée "sélectionnable". Vous pouvez basculer d'autres classes CSS ultérieurement. Créez une classe CSS nommée "sélectionnée". et lui donner le look souhaité.

<div class="selectable">  (=off) vs. <div class="selectable selected"> (=on)

Ajoutez quelque chose comme ceci à la section scripts de votre document:

$(document).ready(function(){

  // handle mouseover and mouseout of the parent div
  $("div.selectable").mouseover(
    function() { 
      $(this).addClass("selected").addClass("mouseIsOver");
    }
  ).mouseout(
    function() { 
      $(this).removeClass("selected").removeClass("mouseIsOver");
    }
  );

  // handle focus and blur of the contained input elememt,
  // unless it has already been selected by mouse move
  $("div.selectable input").focus(
    function() {
      $(this).parents("div.selectable").not(".mouseIsOver").addClass("selected");
    }
  ).blur(
    function() {
      $(this).parents("div.selectable").not(".mouseIsOver").removeClass("selected");
    }
  );
});

Ceci n’a pas été testé, il pourrait donc y avoir un problème, mais cela vous donnera une idée générale par où commencer.

P.S: changer la taille du texte lors du déplacement de la souris n'est peut-être pas la meilleure des idées. Cela conduit à réorganiser la mise en page, ce qui est gênant pour l'utilisateur.

Answer 2

Il existe également une solution CSS pure à ce problème. Cependant, cela ne fonctionne pas dans MSIE 6. Techniquement, cela fonctionne de la même manière que la solution de Tomalek, mais au lieu d’utiliser JavaScript pour changer la classe de l’élément, il utilise CSS pour changer de style:

.selectable { /* basic styles …  */ }
.selectable:hover { /* hover styles … */ }
.selectable:active { /* focus styles … */ }

Answer 3

@Tomalak:

Pourquoi interrogez-vous le DOM quatre fois?

Une petite modification, mais un énorme avantage en termes de rapidité:

$("div.selectable").mouseover(function ()
{
    // ...
}).mouseout(function ()
{
    // ...
});

Answer 4

Cela n’a aucun rapport, mais la balise label n’englobe pas la balise d’entrée. Vous attribuez à l'étiquette une étiquette "for". attribut qui correspond à l'ID de l'élément d'entrée. Exemple,

<label for="username">Username</label>
<input type="text" name="username" value="Enter your username..." id="username" />

Answer 5

Encore une autre réponse sans rapport avec l'original, mais ... jQuery a également une syntaxe alternative pour effectuer un survol de souris / survol, appelé survol.

$(element).hover(function(){ /* mouseover */ }, function(){ /* mouseout */ });

Exemple,

$('ul#nav li').hover(function() {
    $(this).addClass('highlight');
}, function() {
    $(this).removeClass('highlight');
});

Désolé pour ces doubles $, je n'arrive pas à comprendre comment y échapper.