restricting keyboard input with keypress jquery

I have a keypress function I created with a game to take user input in a form w/the enter button (and to have a series of functions I defined first go in sequence on the Enter key being pressed).

$(".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.");

            }
  });

which works great. But, Now, I'm trying to restrict the user from Only being able to input letters & only one at a time- I'd like to restrict anything other than single letters from being input first then to keep my keypress chain of events tied to the enter key after that- I've tried doing something like this:

 $(".form-control").keypress(function(event) {
          var keycode = (event.keyCode ? event.keyCode : event.which);
          if (!(keycode >= 65 && keycode <= 90)){
             event.preventDefault();
          }   
          if (keycode == 13) {
      //    if (keycode > 65 && keycode < 90){
            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.");

            }
         //   }
  });

which doesn't work (I feel like the syntax is wrong) & it messes up the functionality of my game play; then I tried:

$(".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 > 13 && keycode < 65 || keycode > 90){
              event.preventDefault();
            }
            else
              window.alert("You already guessed this letter.");

            }
  });

which also didn't work. I've also tried creating another function just dealing with restricting the inputs to letters separate of the function for the enter key that's tied to game play which also did not work/caused enter to not trigger these events (or my game to not display guessed letters or register correct guesses as wrong guesses) as well as just making a conditional statement if(keycode > 65 || keycode < 90) which also caused game or display errors & I'm not really sure how I should be going about this- I've tried so many different approaches all day to no avail & some advise/suggestions would really be appreciated. Here's a link to my Fiddle if u need to see how the entire game works: https://jsfiddle.net/KindeR99/wuftst3t/

EDIT**: I've tried the .alpha() jquery plug in (though I'd like to find a native JS/jquery solution to this) which also didn't work for me (but I may not have been using it right). I'm not sure why none of these solutions work/either don't restrict the input or mess up my game functionality. I've also tried this approach w/reg expressions:

 $(".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(/[a-z]/)) 
            {
              play(space);
              $(this).val('');
              endGame();
              return false;
            }
            else
              window.alert("That's restricted.");

            }
  });

And this to just restrict keycode of the input:

$(".form-control").keypress(function(event) {
          var keycode = (event.keyCode ? event.keyCode : event.which);
          if (keycode > 65 || keycode < 90) {
            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.");

            } 
          else 
          {
          event.preventDefault();
          }  
  });

But they both messed up the html display of my game or game function (& I'm not sure which is the best approach to take to solve this issue & which will have the least impact on the functionality of my game). It's not so important that the input is only taken after pressing enter- I just want to be able to keep the games functionality as is & I'm not sure which road to go down to solve this- if I knew Which approach was the best way to properly do this, I could focus just on that method & try to do a more in depth debug. Thanks!

回答1:

Two things to help improve your game:

To add a max input length on your textbox use the maxlength attribute.

<input type="text" id="form" class="form-control" placeholder="guess" maxlength="1">
To restrict only alphabetic inputs and prevent empty string guesses add the following to your (".form-control").keypress function

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.");
}

回答2:

$.restrict() is exactly for this purpose.