Champ texte + conditions
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 :) -
Bonsoir c est possible avec javascript je pense
-
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 ? -
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? -
J'utilise Firefox
-
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 ?
-
quel sont les choix?
-
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);
-
penser à mettre résolu
