使用按键限制键盘输入 jQuery

Question

我有一个我用游戏创建的按键功能，可以使用 enter 按钮以表单形式接受用户输入（并让我首先定义的一系列功能按顺序进行在按下 Enter 键时）。

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

            }
  });

效果很好。但是，现在，我试图限制用户只能输入字母并且一次只能输入一个字母 - 我想限制除了单个字母之外的任何东西首先被输入然后保持我的按键事件链之后输入回车键-我试过这样做：

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

            }
         //   }
  });

这是行不通的（我觉得语法不对），它打乱了我玩游戏的功能；然后我尝试了：

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

            }
  });

这也没有用。我还尝试创建另一个函数，只是处理将输入限制为与游戏相关的输入键的函数分开的字母输入，该输入键也没有 work/caused enter 不触发这些事件（或者我的游戏不触发显示猜出的字母或将正确的猜测注册为错误的猜测）以及仅制作条件语句 if(keycode > 65 || keycode < 90) 这也会导致游戏或显示错误，我不确定我应该如何处理这个 - 我试过整天有这么多不同的方法都无济于事，有些 advice/suggestions 真的很感激。如果您需要查看整个游戏的运行方式，请向我的 Fiddle 发送 link： https://jsfiddle.net/KindeR99/wuftst3t/

编辑**：我试过 .alpha() jQuery 插件（虽然我想找到一个原生的 JS/jQuery 解决方案），但也没有为我工作（但我可能没有正确使用它）。我不确定为什么 none 这些解决方案 work/either 不限制输入或弄乱我的游戏功能。我也用正则表达式尝试过这种方法：

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

            }
  });

这只是限制输入的键码：

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

但他们都搞砸了我的游戏或游戏功能的 html 显示（我不确定哪种方法是解决此问题的最佳方法，哪种方法对我的游戏的功能）。仅在按下 Enter 后才进行输入并不重要 - 我只是希望能够保持游戏功能不变，我不确定要走哪条路来解决这个问题 - 如果我知道哪种方法最好正确执行此操作的方法，我可以只关注该方法并尝试进行更深入的调试。

Answer 1

$.restrict()正是为了这个目的。

Answer 2

有两件事可以帮助您改进游戏：

要在文本框中添加最大输入长度，请使用 maxlength 属性。

<input type="text" id="form" class="form-control" placeholder="guess" maxlength="1">
要仅限制字母输入并防止空字符串猜测，请将以下内容添加到您的 (".form-control").keypress 函数

.

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

使用按键限制键盘输入 jQuery

Restricting keyboard input with keypress jQuery

jquery

function

input

keypress

jquery-events