Discussion :

[DjKader]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[sekaijin]

onkeypress onkeyup etc.

A+JYT

[DjKader]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

grid0[ligne][colonne] = null;

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

Encore merci

[sekaijin]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

avec le traitement dans la méthode

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
if (val != ""){
   ...
grid0[ligne][colonne] = parseFloat(val);
}
if (val == ""){
  grid0[ligne][colonne] = null;
}

devient

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Je suppose que tu as une fonction verif comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Watilin]

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[Bovino]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[mlebeguec]

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

[Watilin]

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.

[mlebeguec]

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