Restricting keyboard input with keypress jQuery

问题

I have a keypress function I created with a game to take user input in a form with 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 and 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) and 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 and I'm not really sure how I should be going about this - I've tried so many different approaches all day to no avail and some advice/suggestions would really be appreciated. Here's a link to my Fiddle if you 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 with regular 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 (and I'm not sure which is the best approach to take to solve this issue and 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 and 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 and try to do a more in depth debugging.

回答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.

来源：https://stackoverflow.com/questions/35470222/restricting-keyboard-input-with-keypress-jquery

标签

jquery

function

input

keypress

jquery-events