Changer la couleur d'un input [Fermé]

Signaler
-
Messages postés
80
Date d'inscription
samedi 15 septembre 2012
Statut
Membre
Dernière intervention
20 octobre 2014
-
Bonjour,
j'aimerai faire en sorte que la bordue de mon inpute change de couleur lorsque l'utilisateur rempli les conditions requises.
Voici le code


<style>
    #faux{
     border: red solid 1px;
    }
    
    #juste{
     border: green solid 1px;
    }
</style>
<input type="text" size="60" name="imput"/>
<input type="text" size="60" name="imput"/>
<script>
    var imp = document.getElementsByTagName('input');
    for(var i=0; i<imp.length; i++)
    {
        if(imp[i].value.length < 2)
        {
             imp[i].id = 'faux';
        }
        else if(imp[i].value.length > 2)
        {
             imp[i].id = 'juste'; 
        }
    }
</script>


Ce code fonctionne uniquement si on actualise la page, or il faudrait que la condition ce vérifie à mesure que l'utilisateur entre du texte dans l'input.
Voila, merci.

2 réponses

C'est bon j'ai trouvé, il suffit d'ajouter un évènement pour que ça fonctionne comme ceci:

    var imp = document.getElementsByTagName('input'),
        o = {};
    for(var i=0; i<imp.length; i++)
    {
        imp[i].addEventListener('keypress', function(e)
                                         {
                                             if(e.target.value.length < 2)
                                             {
                                                  e.target.id = 'faux';
                                             }
                                             else if(e.target.value.length > 2)
                                             {
                                                  e.target.id = 'juste'; 
                                             }  
                                         }, false);
    }


Voila en espérant que ça aide les débutants comme moi en javaScript.
Messages postés
80
Date d'inscription
samedi 15 septembre 2012
Statut
Membre
Dernière intervention
20 octobre 2014
7
bonjour,

c'est normal, le code javascript ne s'exécute que s'il est appelé.
La méthode basique est d'utiliser l'attribut onchange sur l'input ou avec un listener
https://www.w3schools.com/jsref/event_onchange.asp

A voir aussi les attributs html qui permettent d'empêcher l'envoi du formulaire si les conditions ne sont pas remplies. Ex required https://www.w3schools.com/tags/att_input_required.asp