Sujet Précédent Sujet Suivant

Changer la couleur d'un input

Fermé
lamouche - Modifié par lamouche le 10/07/2014 à 00:37
dan-b Messages postés 80 Date d'inscription samedi 15 septembre 2012 Statut Membre Dernière intervention 20 octobre 2014 - 10 juil. 2014 à 12:23
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.

A voir également:

2 réponses

Réponse 1 / 2
lamouche
Modifié par lamouche le 10/07/2014 à 12:37
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.
0
Réponse 2 / 2
dan-b Messages postés 80 Date d'inscription samedi 15 septembre 2012 Statut Membre Dernière intervention 20 octobre 2014 7
10 juil. 2014 à 12:23
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
0

Discussions similaires

input signal out of range
marlene -
usman000 -

14 réponses
couleur personnage
Gasper -
Izzi -

9 réponses
sertissage des cables rj45
lekludo -
brupala -

7 réponses