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:

Changer la couleur d'un input
Changer dns - Guide
Piratage facebook changer mot de passe - Guide
Changer la couleur de la barre des taches - Guide
Changer clavier qwerty en azerty - Guide
Somme si couleur - Guide

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.

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

Discussions similaires

couleur personnage

input signal out of range

sertissage des cables rj45

Discussions similaires

Newsletters