Champ texte + conditions
ThOleS2
Messages postés
19
Statut
Membre
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour,
Je suis en train de construire un petit site internet, et j'aimerais savoir s'il est possible de créer un champ où en validant le mot entré dans le champ, le cadre du champ change de couleur en vert si le mot entré est bon ou en rouge si le mot entré est faux.
Par exemple ; si le mot à trouver est "bouée", faire une condition en rentrant des mots clés :
Si dans le champ il y a écrit "bouée, boué, bouee, boue, bwé", alors le champ texte s'encadre de vert, sinon le champ texte s'encadre de rouge.
Je recherche donc un code html pour créer ce champ.
J'espère avoir bien expliqué ce que je recherche :)
Merci à vous !
Je suis en train de construire un petit site internet, et j'aimerais savoir s'il est possible de créer un champ où en validant le mot entré dans le champ, le cadre du champ change de couleur en vert si le mot entré est bon ou en rouge si le mot entré est faux.
Par exemple ; si le mot à trouver est "bouée", faire une condition en rentrant des mots clés :
Si dans le champ il y a écrit "bouée, boué, bouee, boue, bwé", alors le champ texte s'encadre de vert, sinon le champ texte s'encadre de rouge.
Je recherche donc un code html pour créer ce champ.
J'espère avoir bien expliqué ce que je recherche :)
Merci à vous !
13 réponses
-
le mot est boué
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>test</title> <style type="text/css"> </style> </head> <body> <form id="form"> <input type="text" id="word" /> <br /> <input type="submit" value="soumettre" /> </form> <script type="text/javascript"> function submit() { var word = document.getElementById("word"); var just = "boué"; if(word.value == just) { word.style.backgroundColor = "green"; } else { word.style.backgroundColor = "red"; } } var form = document.getElementById("form"); form.addEventListener("submit", function(e) { submit(); e.preventDefault(); }, true); </script> </body> </html>
-
J'ai trouvé un bon exemple :
Sur https://whatthemovie.com/ le but est de trouer le titre d'un film ; quand vous entrez le nom du film la cadre se met en vert, et quand vous vous trompez, le cadre se met en rouge.
Merci :) -
-
Super, merci beaucoup !!!
Par contre quand je rentre "boué" et que je fais "soumettre" la page se recharge puis je ne vois pas si le mot était bon ou mauvais. Est-ce qu'il n'est pas possible de voir la réponse directement après avoir soumit mon mot clé sans que la page ne se recharge ? -
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
Ben je comprend pas normalement la ligne
e.preventDefault();
sert justement à cela et chez moi la page ne se charge pas et mot reste affiché
Quel navigateur utilisé vous? -
-
Ah non je sais ;
J'utilise Joomla sur Firefox, et quand je retourne pour modifier mon code il n'y a plus que ces lignes :
<p>test</p> <form id="form"><input id="word" type="text" /> <br /> <input type="submit" value="soumettre" /></form>
Du coup ce n'est plus un problème avec le code que j'ai, mais avec Joomla... -
C'est bon j'ai trouvé ! Si ça intéresse quelqu'un pour plus tard :
Dans Joomla, il faut aller dans "Configuration" puis changer la ligne"Éditeur par défaut" où il y a écrit "Éditeur - TinyMCE" qu'il faut remplacer par "Éditeur - Non WYSIWYGe".
Voilà, encore merci à lobotoFix !!! -
Et une dernière chose ; Comment est-ce que je fais pour proposer plusieurs choix de réponses ?
-
-
En plus de
var just = "boué";
il faudrait "bouée", "bwé".
Je ne sais pas si les accents et majuscules comptent par contre. -
function submit() { var word = document.getElementById("word"); if(word.value=="boué"||word.value=="bouée"||word.value=="bwé") { word.style.backgroundColor = "green"; } else { word.style.backgroundColor = "red"; } } var form = document.getElementById("form"); form.addEventListener("submit", function(e) { submit(); e.preventDefault(); }, true);
-
