Value qui s'éfface [JQUERY]

 
Poster un nouveau sujet   Répondre au sujet    Forums World-Informatique.com Index du Forum -> Aide Webmasters Version imprimable
Voir le sujet précédent :: Voir le sujet suivant  
Auteur Message
maxime44

Habitué
Habitué


Inscrit le: 03 Aoû 2006
Messages: 166
Localisation: Nantes

MessagePosté le: Sam Juil 23, 2011 5:39 Répondre en citant

Bonjour à tous !

J'aurais de nouveau besoin de votre précieuse aide pour me mettre sur une piste. En effet, je cherche à faire un input, exactement comme la barre de recherche Google. Le "Google" écrit en gris s'efface lorsque nous cliquons sur l'input pour le remplir, et réapparait si nous sortons du champs si nous n'avons rien écrit. Mais par contre, si nous écrivons quelque chose dedans et que nous sortons du champs, le "Google" ne reviens pas, il laisse ce qu'on à écrit.

Un exemple concret : http://creationwn.cluster010.ovh.net/macmahon/

Donc en haut a droite c'est le système de newsletter que je souhaite mettre en place, lorsque qu'on clique pour le remplir, le mot newsletter cède sa place à un input vide, comme voulu, mais si nous écrivons une adresse et que nous sortons du champs, l'adresse s'efface et le mot newsletter reviens ! Alors qu'il faudrait laisser l'adresse écrite.

Voici les codes :
CSS :
Code:
    #email{
        padding:5px;
        outline:none;
        height:20px;
    }
    .focus{
        border:solid 2px #73A6FF;
        background:#EFF5FF;
        color:#000;
    }
    .idle{
        background:#EEE;
        color: #6F6F6F;
        border: solid 2px #DFDFDF;
    }


HTML :
Code:
   <span id="news">Inscrivez vous à la newsletter
      <form method="post"  action="inscription.php">
         <input type="text" value="" title="Newsletter" name="email" id="email" class="test">
            <span class="bouton"><img src="img/idle.gif" title="" class="infobulle"></span>
         <input type="submit" value="S'inscrire" id="submit"/>
      </form>
        </span>


Javascript :

Code:
$(function (){   //Value qui s'efface
      
       $("input.test").each(function(){
        $(this).addClass("idle").val($(this).attr("title"));
        $(this).focus(function(){
            if($(this).val()==$(this).attr("title"))
                $(this).removeClass("idle");
             $(this).addClass("focus").val("");
        });
        $(this).blur(function(){
            if($(this).val()=="")
          $(this).removeClass("focus");
                $(this).addClass("idle").val($(this).attr("title"));
        });
    });


J'ai eu l'idée de stocker dans une variable la valeur qu'on écrit et de la restituer lorsqu'on quitte le champs, sauf que de toute les maniere la derniere valeur qui sera enregistrer dans cette variable c'est "Newsletter". Donc ça ne marche pas.

Si uelqu'un a une idée ! Je suis preneur ! Merci d'avance !
Revenir en haut
Déconnecté Voir le profil de l'utilisateur Envoyer un message privé Voir les profils informatiques
maxime44

Habitué
Habitué


Inscrit le: 03 Aoû 2006
Messages: 166
Localisation: Nantes

MessagePosté le: Sam Juil 23, 2011 18:38 Répondre en citant

J'ai trouvé la solution, avec beaucoup de recherche et de temps.
Je l'a met ici :

Code:
 $('input.populate').each(function(){

    var e = $(this);
    if (e.attr('title').length &! e.val().length) {
      e.val(e.attr('title'));
    }
    if (e.attr('title') == e.val()) e.addClass('inputLabel');

    e.focus(function(){
      var e = $(this);
      if (e.attr('title') == e.val()) {
        e.val('').removeClass('inputLabel');
      }
    }).blur(function(){
      var e = $(this);
      if (e.attr('title').length &! e.val().length) {
        e.val(e.attr('title')).addClass('inputLabel');
      }
    });

    $('label[@for='+$(this).attr('id')+']').addClass('structural');

  });
Revenir en haut
Déconnecté Voir le profil de l'utilisateur Envoyer un message privé Voir les profils informatiques
Montrer les messages depuis:    Voir le sujet précédent :: Voir le sujet suivant  
Poster un nouveau sujet   Répondre au sujet    Forums World-Informatique.com Index du Forum -> Aide Webmasters Toutes les heures sont au format GMT + 1 Heure
Page 1 sur 1

 
Sauter vers:  
Vous ne pouvez pas poster de nouveaux sujets dans ce forum
Vous ne pouvez pas répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum
Vous ne pouvez pas voter dans les sondages de ce forum



Powered by phpBB © 2001, 2005 phpBB Group   -   Traduction par : phpBB-fr.com
Hébergement offert par OVH