restreindre la saisie au clavier avec jquery

J’ai créé une fonction de frappe avec un jeu pour saisir les utilisateurs sous une forme avec le bouton Entrée (et pour avoir une série de fonctions que j’ai définies en premier lieu, en séquence sur la touche Entrée enfoncée).

$(".form-control").keypress(function(event) { var keycode = (event.keyCode ? event.keyCode : event.which); if (keycode == 13) { var space = $(this).val().toLowerCase(); if (!(wrongGuesses.indexOf(space) > -1 || rightGuesses.indexOf(space) > -1)) { play(space); $(this).val(''); endGame(); return false; } else window.alert("You already guessed this letter."); } }); 

qui fonctionne très bien. Mais, maintenant, j’essaie d’empêcher l’utilisateur de ne pouvoir saisir que des lettres et une seule à la fois. J’aimerais limiter toute entrée autre qu’une lettre à une autre, afin de garder ma chaîne d’événements liés à la frappe maintenue. à la touche entrée après cela, j’ai essayé de faire quelque chose comme ceci:

  $(".form-control").keypress(function(event) { var keycode = (event.keyCode ? event.keyCode : event.which); if (!(keycode >= 65 && keycode  65 && keycode  -1 || rightGuesses.indexOf(space) > -1)) { play(space); $(this).val(''); endGame(); return false; } else window.alert("You already guessed this letter."); } // } }); 

ce qui ne marche pas (j’ai le sentiment que la syntaxe est fausse) et cela gâche la fonctionnalité de mon jeu; alors j’ai essayé:

 $(".form-control").keypress(function(event) { var keycode = (event.keyCode ? event.keyCode : event.which); if (keycode == 13) { var space = $(this).val().toLowerCase(); if (!(wrongGuesses.indexOf(space) > -1 || rightGuesses.indexOf(space) > -1)) { play(space); $(this).val(''); endGame(); return false; } else if (keycode  13 && keycode  90){ event.preventDefault(); } else window.alert("You already guessed this letter."); } }); 

qui n’a pas non plus fonctionné. J’ai également essayé de créer une autre fonction traitant uniquement de la limitation des entrées aux lettres et de la fonction de la touche entrée liée au jeu. Cette opération ne fonctionnait pas non plus et empêchait l’entrée de déclencher ces événements (ou mon jeu ne s’affiche pas deviné) lettres ou enregistrer des suppositions correctes comme des suppositions erronées) ainsi que de simplement faire une déclaration conditionnelle si (keycode> 65 || keycode <90) qui a également causé des erreurs de jeu ou d'affichage et je ne suis pas vraiment sûr de ce que je devrais faire à ce sujet- J'ai essayé tellement d'approches différentes toute la journée en vain et quelques conseils / suggestions seraient vraiment appréciés. Voici un lien vers mon violon si vous avez besoin de voir comment tout le jeu fonctionne: https://jsfiddle.net/KindeR99/wuftst3t/

• Un clic sur un bouton lance une fonction – ne fonctionne pas?
• Jquery change image on click
• Comment utiliser les fonctions wordpress dans un appel ajax
• Jquery delay on function
• Fonction appelante après .load (Jquery)

EDIT **: J’ai essayé le plug-in .alpha () jquery (bien que j’aimerais bien trouver une solution JS / jquery native à cela) qui ne fonctionnait pas non plus pour moi (mais je ne l’avais peut-être pas utilisé droite). Je ne suis pas sûr de savoir pourquoi aucune de ces solutions ne fonctionne ou bien ne limitez pas l’entrée ou ne gâchez pas les fonctionnalités de mon jeu. J’ai aussi essayé cette approche avec les expressions reg:

  $(".form-control").keypress(function(event) { var keycode = (event.keyCode ? event.keyCode : event.which); if (keycode == 13) { var space = $(this).val().toLowerCase(); if (!(wrongGuesses.indexOf(space) > -1 || rightGuesses.indexOf(space) > -1) || space.length !== 1 || !space.match(/[az]/)) { play(space); $(this).val(''); endGame(); return false; } else window.alert("That's ressortingcted."); } }); 

Et ceci pour simplement restreindre le keycode de l’entrée:

 $(".form-control").keypress(function(event) { var keycode = (event.keyCode ? event.keyCode : event.which); if (keycode > 65 || keycode  -1 || rightGuesses.indexOf(space) > -1)) { play(space); $(this).val(''); endGame(); return false; } else window.alert("You already guessed this letter."); } else { event.preventDefault(); } }); 

Mais ils ont tous les deux gâché l’affichage html de mon jeu ou de sa fonction (& je ne suis pas sûr de la meilleure approche à adopter pour résoudre ce problème et qui aura le moins d’impact sur les fonctionnalités de mon jeu). Ce n’est pas si important que l’entrée soit prise seulement après avoir appuyé sur enter. Je veux juste pouvoir garder la fonctionnalité de jeu telle qu’elle est & je ne suis pas sûre de la route à suivre pour résoudre ceci- si je savais quelle approche était la meilleure moyen de le faire correctement, je pourrais me concentrer uniquement sur cette méthode et essayer de faire un débogage plus en profondeur. Merci!

 var keycode = event.keyCode ? event.keyCode : event.which; if ((keycode < 64 || keycode > 91) && (keycode < 96 || keycode > 123) && keycode !== 13) return false; if (keycode == 13) { var space = $(this).val().toLowerCase(); if (space == '') { window.alert("Please enter a letter to guess.") return false; } if (wrongGuesses.indexOf(space) > -1 || rightGuesses.indexOf(space) > -1) { play(space); $(this).val(''); endGame(); return false; } else window.alert("You already guessed this letter."); }