Changer la couleur d'un input
lamouche
-
dan-b Messages postés 86 Statut Membre -
dan-b Messages postés 86 Statut Membre -
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
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.
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. -
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
