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.
A voir également:
- Changer la couleur d'un input
- Changer dns - Guide
- Changer la couleur de la barre des taches - Guide
- La boite a couleur - Télécharger - Divers Photo & Graphisme
- Changer carte graphique - Guide
- Excel cellule couleur si condition texte - Guide
2 réponses
C'est bon j'ai trouvé, il suffit d'ajouter un évènement pour que ça fonctionne comme ceci:
Voila en espérant que ça aide les débutants comme moi en javaScript.
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
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
