[JS] [RÉSOLU] keypress ne fonctionne que sur Firefox

koshieIsYourDaddy · Le 23/10/2016, à 12:44

Bonjour,

première fois que je post ici je crois, je suppose qu'on y apporte de l'aide pour autre chose qu'un "logiciel pour Ubuntu", dans le cas contraire dites le moi et j'irai ailleurs .

Débutant Javascript, j'ai une page web qui contient un appel vers mon code, juste avant le </body>:

<script type="text/javascript" src="js/keyboardNavigation.js"></script>

Ce code fonctionne très bien sur Firefox, mais impossible de le faire marcher (tout court) sur les navigateurs suivant: Chromium, Opera, Internet Explorer 11 et Microsoft Edge. Il ne se passe rien. Du moins, ce code est censé permettre à l'utilisateur de la page de naviguer dans le menu avec les touches haut/bas du clavier, et selectionne la première entrée et lui applique un id (cette dernière chose étant la seule chose fonctionnel, mais je ne peux pas me déplacer).

Après avoir lancé le code sur Chrome, ligne par ligne, je me rend compte que sur ce dernier (et sûrement les autres), le Javascript est exécuté avant le chargement complet du DOM. Du coup ça pose problème...

J'ai regardé sur Internet différente solution mais je n'ai pas réussi à en appliquer une, par exemple j'ai tenté de créer une fonction init() contenant tout mon code, puis juste avant d'y ajouter ceci:

window.onload = function ()
{
    init()
}

Ce code marche toujours sur Firefox, mais pas sur les autres.

Ci-joint le code javascript. Alors bien sûr, ce code est certainement dégueulasse mais j'apprends .

http://paste.debian.net/888877/
(désolé, j'ai pris comme syntax JS mais il ne colore rien, bon...)

Une idée pour forcer le chargement du DOM avant le JS? Des fonctions comme setTimeout() sont à rejeter, je ne sais pas combien de temps la page va mettre à se charger et je ne veux pas qu'il y ait un délais entre les deux.

On m'a parlé d'async et defer, mais il me semble qu'ils ne sont pas utilisable si le code JS modifie le DOM, ce qui est mon cas n'est-ce pas?

Enfin, pas de jQuery puisque pour l'instant je ne veux faire que du JS vanilla, ne mettons pas la charrue avant les bœufs .

koshicalement

Dernière modification par koshieIsYourDaddy (Le 25/10/2016, à 14:19)

J5012 · Le 23/10/2016, à 12:58

soit tu le charges au moment de body, soit apres, mais pas avant ...

le dom est chargé au moment des meta dans head

koshieIsYourDaddy · Le 23/10/2016, à 13:01

Merci pour ta réponse mais je ne pense pas l'avoir comprise.

Qu'est-ce qui se charge au moment du body ou après? Le DOM?

Ma balise <head></head> ne contient pas de Javascript, d'aucune sorte. Et comme j'ai placé à la toute dernière ligne (juste avant </body>) mon appel vers mon code JS, je trouve ça étonnant que les autres navigateurs que Firefox se comportent ainsi. Je sais qu'il est recommandé de placer cette ligne en dernier pour éviter justement mon problème. Ou j'ai mal compris mon problème.

J5012 · Le 23/10/2016, à 13:38

ha je n'avais pas vu le slatch ...
normalement on charge un script dans le head quand on veut qu'il s'applique sur toute la page
on le charge au moment du body par onload si on veut controler comme evenement
on le charge dans le corps (dans body) à proximité des objets qui l'utilisent si on veut limiter l'action du script à une division de page (balise div)

le dom est chargé par html et meta, et tient en general sur deux lignes ...
si ca prend du temps comme tu le dis, c'est qu'il y a un probleme avec le moteur de rendu html, soit le navigateur lui-meme ...
→ essaie de charger ton script avec un fichier html sans chargement du dom (son chargement sera implicite)

seebz · Le 23/10/2016, à 16:53

Essaye avec les modifications suivantes (chargement du fichier avant </body>) :

// Début du fichier
"use strict";
console.log("Script lancé!")

(function (){
    // **************** //
    // *** VARIABLE *** //
    // **************** //

    // ....

    // ********************** //
    // *** EVENT LISTENER *** //
    // ********************** //
        
    selectedEntry.setAttribute("id", "selectedEntry");

    document.addEventListener("keypress", function(event)
    {
        // Recover the pressed key from the user input
        pressedKey = event.keyCode;
        // Run function detectKey() and assign the returned value to the variable
        isMovementAllowed = detectKey(pressedKey);
        // Run the last function with the return of the one
        moveEntry(isMovementAllowed);
    });
})();
// Fin du fichier

À noter aussi que addEventListener ne fonctionne pas avec les anciennes versions d'Internet Explorer, une recherche sur le net devrait te donner plus d'infos.

Dernière modification par seebz (Le 23/10/2016, à 16:55)

temps · Le 23/10/2016, à 17:29

Bonjour,
Des AMO (Addon Moz org), depuis la version 48, la bonne pratique est :

 document.addEventListener("DOMContentLoaded", function(event) {
    lancemoncodejavascript();
  });

Ce n'est plus l'action dans HTML qui lance une fonction se trouvant dans le fichier js, ça c'était bon jusqu'à début aout de cette année (version 46 de moz alias firefox).
Je sais que ce que je code fonctionne très bien sur chrome pour avoir testé par curiosité, mais à par moz ça ne m’intéresse pas. ça doit faire un an que je n'ai pas allumé mon mac book pro, et je ne démarre ma partition windows 10 que pour maintenir les mises à jour et tester les nouvelles fonctionnalités. En d'autres mots, je pense qu'il faut faire comme si les autres navigateurs n'existaient pas, ils n'existent que si nous perdons notre temps avec.

Cordialement

Dernière modification par temps (Le 23/10/2016, à 17:37)

koshieIsYourDaddy · Le 24/10/2016, à 01:07

@J5012, j'ai cru comprendre que tu me dis de mettre l'appel au script dans mon head, ça n'a pas marché.

@seebz, pas mieux hélas.

@temps, idem, pas mieux.

Cependant ta méthode semblait être radicale, j’attends explicitement la fin du chargement du DOM et ensuite il lance le reste du code. J'ai même un console.log("DOM chargé"); juste avant le reste de mon code pour confirmer que l'event a bien été capturé... Et c'est le cas. J'ai même mis à la place de DOMContentLoad un simple load qui lui attend le chargement de tout, image et css compris, mais là ça marche plus.

Dernière modification par koshieIsYourDaddy (Le 24/10/2016, à 01:09)

temps · Le 24/10/2016, à 06:55

Bonjour,
La méthode indiquée est celle préconisée, ma méthode serait plutot d'associer les fonctions au onclick, il suffit de regarder mes pages web et tous les instruments de musique que j'ai créé, c'était et c'est peut être encore ce que nous trouvons chez w3c.

La solution est celle que j'ai indiquée, mais il faut suivre les règles, et bien construire à l'intérieur de lancemoncodejavascript();
qui peut être nommé load, mais simple n'est peut-être pas le terme car celà dépend de ce qu'il y a dedans.
Afin d'éviter toute confusion et interprétation personnelle du code, le passage par l'exemple est une solution.
j'ai placé dans github l'avant dernier addon que j'ai créé et qui est validé, voir tout en bas des fichiers js, comment je piste l'ouverture des page et les évènements https://github.com/temps9/lecjoa/tree/m … ge-scripts, sinon, je peux faire quelques recherches sur MDN, ça doit être expliqué en d'autres termes

soshy · Le 24/10/2016, à 20:42

C'est surtout que Mozilla est pas foutu de suivre sa propre documentation...

https://developer.mozilla.org/en-US/doc … s/keypress
Extrait pertinent:

The keypress event is fired when a key is pressed down and that key normally produces a character value

Les flèches de direction ne produisent pas de caractère, c'est donc normal que ça ne fonctionne pas avec "keypress". Ce qui n'est pas normal en revanche, c'est que ça fonctionne sur Firefox. Change ça pour "keyup" ou "keydown". Ca devrait mieux fonctionner.

Rien à voir donc avec le JS chargé avant le DOM ou autre. Ceci étant dit, c'est toujours une bonne idée d'utiliser

<body onload="init()">

Tu débutes et tu es au courant que ton code est pas super super alors je vais me contenter de te dire qu'utiliser une variable dans une fonction, déclarée hors de ladite fonction, c'est à proscrire

var x = 8;
function test() {
    x = "nouvelle valeur"; // c'est mal
    var z = x + 3; // c'est mal aussi
}

Dernière modification par soshy (Le 24/10/2016, à 21:05)

J5012 · Le 24/10/2016, à 21:25

@soshy : je ne crois pas ... mdn dit clairement sur "keypress" que c'est utilisé comme detection d'evenement, et que si on veut lire la touche, il conseille plutot "input" ...

The keypress event is fired when a key is pressed down and that key normally produces a character value (use input instead).

la note de mdn precise que chrome n'implemente pas keypress, et conseille l'usage de keydown ...

soshy · Le 24/10/2016, à 21:31

J5012 a écrit :

la note de mdn precise que chrome n'implemente pas keypress, et conseille l'usage de keydown ...

Ca c'est ce qu'on comprend si on lit la moitié de la note. Et pour l'avoir essayé, keypress fonctionne sur chrome avec les touches a b c ... Et effectivement pas avec les flèches, entre autres.

La note parle des raccourcis "prédéfini" ou "réservé" à/par l'OS; et la note indique donc pour ce cas précis, qu'il faut utiliser keydown.

Tu peux même essayer ça dans firefox et chrome pour bien vérifier que j'ai raison si tu doutes encore

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>exemple bateau</title>

    <script type="text/javascript">
        function loadme() {
            document.addEventListener("keydown", function(event) {
                console.log('keydown');
            });
            document.addEventListener("keypress", function(event) {
                console.log('keypress');
            });
        }
    </script>
</head>

<body onload="loadme()"></body>
</html>

firefox log les 2 évènement sur les lettres et les flèches
chrome log les 2 évènement sur les lettres, mais ne log que keydown sur les flèches.

Dernière modification par soshy (Le 24/10/2016, à 21:53)

temps · Le 24/10/2016, à 23:37

Bonjour,
Il y a toujours des solutions, car ce qui compte c'est l'action.
Et ce sont les lettres qui servent de touche de déplacement un peu comme dans vi,
Cordialement

koshieIsYourDaddy · Le 25/10/2016, à 14:17

soshy a écrit :

Les flèches de direction ne produisent pas de caractère, c'est donc normal que ça ne fonctionne pas avec "keypress". Ce qui n'est pas normal en revanche, c'est que ça fonctionne sur Firefox. Change ça pour "keyup" ou "keydown". Ca devrait mieux fonctionner

En effet, "keyup" et (de préférence dans mon cas) "keydown" fonctionne sur Firefox, Chromium, Opera, IE 11 et Edge à merveille :-)!

soshy a écrit :

Rien à voir donc avec le JS chargé avant le DOM ou autre. Ceci étant dit, c'est toujours une bonne idée d'utiliser

En effet, j'ai mal analysé le problème!

soshy a écrit :

Rien à voir donc avec le JS chargé avant le DOM ou autre. Ceci étant dit, c'est toujours une bonne idée d'utiliser

Je sais bien, je n'ai pas fais de Javascript durant des mois. Je connais cette histoire de scope d'une variable, je dois juste m'y remettre. Mais tu as raison de me le rappeler, je vais relire de la doc chez MDN .

J5012 a écrit :

@soshy : je ne crois pas ... mdn dit clairement sur "keypress" que c'est utilisé comme detection d'evenement, et que si on veut lire la touche, il conseille plutot "input" ...

J5012 a écrit :

la note de mdn precise que chrome n'implemente pas keypress, et conseille l'usage de keydown ...

Et du coup avec keydown ça fonctionne à merveille.

Du coup, mon event listener ressemble à ça désormais:

    document.addEventListener("keydown", function(event)
    {   
        // Recover the pressed key from the user input
        pressedKey = event.keyCode;
        // Run function detectKey() and assign the returned value to the variable
        isMovementAllowed = detectKey(pressedKey);
        // Run the last function with the return of the one
        moveEntry(isMovementAllowed);
    });

Très certainement perfectible, mais pour un début j'en suis quand même content.

Ma prochaine étape et de régler un petit bug tout bête plus lié à du CSS qu'à autre chose et à modifier le scope de mes variables pour que ça soit plus propre. Ah, et ajouter un click avec la touche entrée.

Merci à toutes et à tous pour votre aide.

koshicalement

Dernière modification par koshieIsYourDaddy (Le 25/10/2016, à 14:18)

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#1 Le 23/10/2016, à 12:44

[JS] [RÉSOLU] keypress ne fonctionne que sur Firefox

#2 Le 23/10/2016, à 12:58

Re : [JS] [RÉSOLU] keypress ne fonctionne que sur Firefox

#3 Le 23/10/2016, à 13:01

Re : [JS] [RÉSOLU] keypress ne fonctionne que sur Firefox

#4 Le 23/10/2016, à 13:38

Re : [JS] [RÉSOLU] keypress ne fonctionne que sur Firefox

#5 Le 23/10/2016, à 16:53

Re : [JS] [RÉSOLU] keypress ne fonctionne que sur Firefox

#6 Le 23/10/2016, à 17:29

Re : [JS] [RÉSOLU] keypress ne fonctionne que sur Firefox

#7 Le 24/10/2016, à 01:07

Re : [JS] [RÉSOLU] keypress ne fonctionne que sur Firefox

#8 Le 24/10/2016, à 06:55

Re : [JS] [RÉSOLU] keypress ne fonctionne que sur Firefox

#9 Le 24/10/2016, à 20:42

Re : [JS] [RÉSOLU] keypress ne fonctionne que sur Firefox

#10 Le 24/10/2016, à 21:25

Re : [JS] [RÉSOLU] keypress ne fonctionne que sur Firefox

#11 Le 24/10/2016, à 21:31

Re : [JS] [RÉSOLU] keypress ne fonctionne que sur Firefox

#12 Le 24/10/2016, à 23:37

Re : [JS] [RÉSOLU] keypress ne fonctionne que sur Firefox

#13 Le 25/10/2016, à 14:17

Re : [JS] [RÉSOLU] keypress ne fonctionne que sur Firefox

Pied de page des forums