Changer la couleur d'un input
lamouche
-
dan-b Messages postés 79 Date d'inscription Statut Membre Dernière intervention -
dan-b Messages postés 79 Date d'inscription Statut Membre Dernière intervention -
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
- Excel cellule couleur si condition texte - Guide
- Changer carte graphique - 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
