onchange avec un input text

Bonsoir à tous !

Dans le cadre de mes études, j'ai commencé il y a quelques semaines à étudier html/css/javascript et j'ai un projet à rendre bientôt. Ce projet concerne la mise en place d'un Sudoku en utilisant html/css/javascript.

Et il se trouve que j'ai un petit problème. Je vais essayer d'être le plus clair possible: Notre professeur nous a fourni un code javascript contenant la grille initiale du sudoku :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

var grid0 = [ [8, 5, 2, null, 6, 3, 9, null, 4], [null, null, null, null, null, 9, null, 6, null], [null, null, 9, null, null, null, null, null, 1], [null, 4, 8, 9, null, null, 6, null, 2], [null, null, 3, 2, null, 1, 7, null, null], [1, null, 7, null, null, 5, 4, 9, null], [2, null, null, null, null, null, 5, null, null], [null, 8, null, 7, null, null, null, null, null], [4, null, 1, 3, 5, null, 2, 8, 7] ];

---

J'ai donc crée un tableau en html représentant cette grille. Et pour chaque case vide, j'ai mis un input text. En voici par exemple un :

Code:

---

<input type="text" id="1-0" class="input", MAXLENGTH="1" onchange="verif(this.id)"/>

---

L'utilisateur rentre donc un chiffre. Le changement de valeur de l'input va lancer la fonction verif() . Je vous épargne tout le code de cette fonction pour vous donner uniquement là où ça cloche:

Code:

---

1 2 3 4 5 6 7

if (val != ""){ ... grid0[ligne][colonne] = parseFloat(val); } if (val == ""){ grid0[ligne][colonne] = null; }

---

Ici, val est la valeur que l'on trouve dans l'input en question. Si val != "", c'est à dire si l'utilisateur a rentré un chiffre, alors cette fonction va vérifier que le chiffre entré par l'utilisateur ne se trouve ni déjà sur la ligne, ni déjà sur la colonne, ni déjà dans le carré. Et si après vérification, il se trouve que le chiffre rentré est juste, alors on le met dans la grille initiale javascript à la place du null.

Cette partie là fonctionne bien. Mais c'est avec l'autre if que ça coince. Si val est égal à "", c'est à dire s'il n'y a rien de rentré dans la case, alors on met null dans la grille initiale.
En fait, avec cette partie je souhaitais gérer la situation où l'utilisateur rentre une valeur juste dans l'input puis la supprime. Si elle est juste, elle est rajoutée à la grille initiale javascript. Mais si après l'utilisateur décide de l'effacer bien qu'elle semblait juste, alors sa valeur reste dans la grille initiale, ce qui fausse les autres vérifications. Du coup, avec ce second if, je voulais remettre null dans la grille si l'utilisateur efface son chiffre.

Seulement, pour une raison qui m'échappe, ça ne marche pas. On dirait que le onchange gère seulement quand l'utilisateur rentre un chiffre, pas quand il en efface un. Quand j'efface un chiffre, ma fonction ne rentre pas dans ce second if.

Pouvez-vous m'expliquer pourquoi ?

Merci d'avance, et désolé si c'est un peu long !

onkeypress onkeyup etc.

A+JYT

Merci de ta réponse !

Je ne connaissais pas ces événements là jusqu'ici.

Donc si je comprends bien, je devrais construire mon input de la manière suivante :

Code:

---

<input type="text" id="1-0" class="input", MAXLENGTH="1" onchange="verif(this.id)" onKeyPress="if (event.keyCode == 8) efface(this.id)"/>

---

efface() étant une fonction qui fera:

Code:

---

grid0[ligne][colonne] = null;

---

C'est bien comme ça que ça s'utilise ?

Encore merci

tu peux aussi tout mettre dans le onKeyUp
qui se produit juste avant le onChange

Code:

---

<input type="text" id="1-0" class="input", MAXLENGTH="1" onkeyup="verif(event)"/>

---

avec le traitement dans la méthode

Code:

---

1 2 3 4 5 6 7

if (val != ""){ ... grid0[ligne][colonne] = parseFloat(val); } if (val == ""){ grid0[ligne][colonne] = null; }

---

devient

Code:

---

1 2 3 4 5 6 7 8

val = event.key; if (event.keyCode != 8){ ... grid0[ligne][colonne] = parseInt(val); //parseInt pour lire un entier. } else { grid0[ligne][colonne] = null; }

---

il faudrait aussi vérifier que parseInt retourne un entier et pas null et dans ce cas faire un return true ou false en fonction du résultat.
tu peux ainsi accepter ou non le caractère dans le champ de saisie. si l'utilisateur tappe "A" le caractère est refusé et la valeur ne changera pas.


Note: j'ai vu que tu faisais

Code:

---

<input type="text" id="1-0" class="input", MAXLENGTH="1" onchange="verif(this.id)" />

---

Je suppose que tu as une fonction verif comme

Code:

---

1 2 3 4

fonction verif(inputId) { var input = document.getElementById(inputId); var val = input.value; }

---

il est bien plus simple d'utiliser des références que des id

Code:

---

<input type="text" id="1-0" class="input", MAXLENGTH="1" onchange="verif(this)" />

---

et

Code:

---

1 2 3 4 5

fonction verif(input) { //pas besoin de getElement on a déjà la référence //var input = document.getElementById(inputId); var val = input.value; }

---

A+JYT

En fait je trouve ça normal que l'évènement change ne soit pas lancé quand l'utilisateur efface le chiffre. Ce qui me paraît bizarre en revanche, c'est qu'il soit lancé quand l'utilisateur entre un chiffre.

Normalement, change se déclenche sur un input seulement si l'utilisateur presse Entrée ou si l'input perd le focus (si l'utilisateur clique ailleurs ou presse Tab).

J'avais trouvé une doc expliquant bien les différents évènements claviers, mais je n'arrive pas à remettre la main dessus. Je vais la résumer en quelques mots.

Il y a 4 sortes d'évènements clavier : keydown, keypress, keyup et change. Ils se produisent toujours dans cet ordre :

1. keydown
2. keypress (optionnel)
3. keyup
4. change

keydown c'est quand la touche est enfoncée, keyup quand la touche est relâchée. Si je maintiens une touche, des keydown sont envoyés à répétition jusqu'à ce que je relâche.

keypress marche comme keydown, mais il est envoyé seulement quand la touche (ou la combinaison de touches) doit produire un caractère. Note : sous certains navigateurs, la touche effacer (backspace) est considérée comme un caractère. Par exemple, la touche Ctrl toute seule ne provoque jamais de keypress.

Enfin, change comme je l'ai dit, ne se lance que lorsque l'utilisateur tape Entrée ou clique hors de l'input. En gros, change attend que l'utilisateur fasse une action qui signifie quelque chose comme « j'ai terminé avec cet input ».

Voici un petit bout de HTML qui permet de faire des tests :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<input type=text> <script>   function logEvent( event ){    console.log(event); }   var $input = document.querySelector("input"); $input.onchange = logEvent; $input.onkeyup = logEvent; $input.onkeydown = logEvent; $input.onkeypress = logEvent;   $input.focus();   </script>

---

A noter qu'il existe aussi désormais l'événement oninput qui se déclenche avant le keyup. ;)

EDIT
Ton exemple serait plus "parlant" sur les navigateurs autres que Firefox avec

Code:

---

1 2 3

function logEvent( event ){ console.log(event.type); }

---

;)

Bonsoir,
Pourquoi mettre des input text et non des select ?
Natso

Le <select> serait ici une facilité bien plus pour le développeur que pour l'utilisateur. Dans la mesure où on sait exactement quelles sont toutes les valeurs possibles, je trouve que le <select> est plus un désagrément qu'autre chose.

Bonsoir,

Chacun son point de vue.

Pour ma part, étant donné que les valeurs pour un sudoku (je suis fan) sont toujours les même , je ne vois pas pourquoi s'embêter à faire saisir des données à l'utilisateur.

Moins de données à saisir mieux c'est.

Cordialement,

Natso