Bonjour,

Je voudrais modifier la couleur du text-shadow d'un input selon la longueur de la valeur à l'intérieur de l'input mais je voudrais vérifier la longueur à chaque changement de la valeur pour ensuite modifier oupah la couleur.

Pour l'instant j'ai fais ce code qui met l'ombre en rouge quand la valeur est plus petite que 5 ou plus grande que 20 sinon en verte et qui fonctionne mais n'est pas propre du tout :

$('#popup_inscription input:[name="pseudonyme"]').focus(function() {
          if($('#popup_inscription input:[name="pseudonyme"]').val().length < 5 ||$('#popup_inscription input:[name="pseudonyme"]').val().length > 20){
                 $('#popup_inscription input:[name="pseudonyme"]').css('text-shadow','1px 0px 0px red');
             }
            else{
                $('#popup_inscription input:[name="pseudonyme"]').css('text-shadow','1px 0px 0px green');
            }
    });

   $('#popup_inscription input:[name="pseudonyme"]').keypress(function() {
             if($('#popup_inscription input:[name="pseudonyme"]').val().length < 5 ||$('#popup_inscription input:[name="pseudonyme"]').val().length > 20){
                 $('#popup_inscription input:[name="pseudonyme"]').css('text-shadow','1px 0px 0px red');
             }
            else{
                $('#popup_inscription input:[name="pseudonyme"]').css('text-shadow','1px 0px 0px green');
            }
   });

Voici le code html et css :

<div id="popup_inscription">
           <form method="post" action="#">
          <label>Pseudonyme</label>
             <input type="text" name="pseudonyme"/>
          <label>Mot de passe</label>
             <input type="password" name="password1"/>
          <label>Vérification du mot de passe</label>
             <input type="password" name="password2"/>
          <label>Adresse email</label>
             <input type="text" name="email"/>
             <input type="submit" value="Inscription"/>
           </form>
        </div>

#popup_inscription input{
    display:block;
    background-color:white;
    border: 1px solid #663403;
    border-radius:5px;
    padding: 0px 5px 5px 0px;
    color:#817F4E;
    text-shadow:1px 0px 0px #B9B875;
    height:20px;
    margin:auto;
    margin-bottom:10px;
}

Je me demandais donc s'il existe une sorte d’événement qui se déclenche au moment de l'entrée sur le input et à chaque changement de la valeur de l'input ?

3 réponses


TU as essayé avec l'événement "change" ? http://api.jquery.com/change/

Wapaca
Auteur

Salut,

Oui mais l'événement ne se déclenche qu'en sortant de l'input si la valeur à changé :/

Si tu veux une action à chaque fois que tu saisis un caractere dans ton input il y a keyup, keydown et keypress
keyup c'est quand tu relaches la touche, keydown quand tu appuis sur la touche et keypress je ne sais plus