Insérer la valeur d'un input dans un champ texte [Résolu]

[CrasherSEP]

Bonjour,

Pas certain d'être dans la bonne section, mais bon... ;-)

J'aimerai créer, insérer un mots croisés sur mon site, via une page *.html

Ce qui fonctionne pour le moment :

• Page *.html avec une grille (mots croisés *. jpg) et les définitions avec champs <input> pour les réponses.
• La vérification des réponses ainsi que l'envoi se fait via *.php

Ce que j'aimerais :
Pour que cela soit plus visuel, j'aimerais que lorsque je rentre un mot dans un <input> - exemple : "maison", les cases de la grille (Tableau avec champs) contenant le mot "maison", affiche les lettres case 1 : m, case 2 : a, case 3 : i, case 4 : s...

Pour moi, il faudrait :
01. récupérer les lettres des <input> dans des variables en vérifiant évidemment si il n'y a pas plus de lettre que de cases pour le mot,
02. attribuer ces lettres dans les différentes cases de la grille,

Mais comment.... :-/ ?????

Auriez-vous une idée du code ?

[yjuliet]

pour récupérer la valeur du input :

Code :

var maVar= document.getElementById('idDeTonInput').value;

Pour le répartir dans ta grille, une boucle for sur la longueur de la chaine récupérée et la méthode charat(n) des String. L'indice de ta boucle for te donne aussi l'offset de ta grille.

[CrasherSEP]

Bonjour,

Super, à vous lire, cela est donc possible voir même très facile... :-/ Mais n'étant pas un Pro. pourriez-vous me donner une exemple avec un <input> mot -> les cases ?

GRAND merci d'avance :-)

[yjuliet]

Tout dépend de la conception de ta grille dans le code HTML, chose probablement la plus difficile dans ton cas. La grille peut être réalisée à l'aide d'un <TABLE> HTML dans laquelle tu pourrais envisager de mettre d'autres INPUT, ou bien avec des images et un <CANVAS> HTML5, plus complexe à utiliser mais permettant un rendu beaucoup plus sympa, voire avec du SVG embarqué, ...

Si tu débutes en JS / HTML, je te conseille fortement de commencer par la lecture des tutoriels. Ils te donneront les bonnes pratiques qui te permettront de concevoir correctement ton système afin de pouvoir utiliser un code potentiellement plus facile à écrire.

[CrasherSEP]

Pour le moment, c'est une <TABLE> HTML avec <INPUT>

Peut-être simple, mais à mon avis plus à ma portée, si je pouvais avoir un petit exemple... ;-)

[yjuliet]

Réfléchis déjà à ton algorithme, à ce que tu veux faire :
"je parcours ma chaine caractère par caractère et avec chacun des caractères, je le place à telle position dans mon tableau." Une fois que tu as ça, dans les tutoriaux, tu trouveras comment le traduire en langage JS.

[CrasherSEP]

Ok, merci, je regarde... :-)

EDIT:
Je vais être franc avec vous, je suis perdu dans les tutos... je trouve des String, des CharAt ou encore des Foreach... mais rien n'est clair pour moi :-/

C'est peut-être trop vous demander... mais pourriez-vous me faire un exemple avec :

Un tableau (10 lignes et 10 colonnes). il y aurait en 3l-3c un champ texte 1, en 3l-4c un champ texte 2, en 3l-5c un champ texte 3, en 3l-6c un champ texte 4 et en 3l-7c un champ texte 5

NB : le champ texte peut être un input, mais ne pourra être changé que via l'input ("Entrez le mot :")

En dessous de ce tableau, un input "entrez le mot :", qui sera "merci"

Donc quand je taperai : m, la lettre "M" sera affiché dans l'input 3l-3c, quand je taperai e, la lettre "E" sera affiché dans l'input 3l-4c, etc...

Il faut évidemment ne pas pouvoir taper "merci bien" ;-)

Mais moi je peux l'écrire, alors "Merci Bien" :-)

Ps : j'ai aussi trouvé : toUpperCase() pour mettre en majuscule (preuve que je cherche ;-))

Ou encore :

Code :

1
2
3
4
5
6
<SCRIPT language=javascript>
var chaine=document.getElementById('inputa').value;
for (var i=0; i<chaine.length; i++) {
 ???????????????????????????????;
}
</SCRIPT>