使用按键jquery限制键盘输入

时间:2016-02-18 00:01:08

标签: jquery function input javascript-events keypress

我有一个按键功能,我用游戏创建了一个带有输入按钮的表单中的用户输入(并且在按下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.");

            }
         //   }
  });

哪个不起作用(我觉得语法错了)&amp;它搞砸了我玩游戏的功能; 然后我试了一下:

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

            }
  });

也没有用。 我还尝试创建另一个功能,只是将输入限制为与输入键功能分开的字母,这些输入键与游戏相关联,这也不起作用/导致输入不触发这些事件(或我的游戏不显示猜测的字母或将正确的猜测记录为错误的猜测)以及如果(键码&gt; 65 ||键码&lt; 90)也导致游戏或显示错误&amp;我不确定自己应该如何处理这个问题 - 我整天尝试了很多不同的方法,但无济于事。一些建议/建议真的很感激。 如果您需要了解整个游戏的工作原理,请点击此链接到我的小提琴: https://jsfiddle.net/KindeR99/wuftst3t/

编辑**:我已经尝试了.alpha()jquery插件(虽然我想找到一个原生的JS / jquery解决方案)但这对我来说也不起作用(但我可能没有正确使用它)。我不确定为什么这些解决方案都不起作用/不要限制输入或搞乱我的游戏功能。我也用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(/[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显示(并且我不确定哪个是解决此问题的最佳方法&amp;这将对功能影响最小我的游戏)。输入仅在按下输入之后才变得不那么重要 - 我只是希望能够保持游戏功能不变。我不知道要解决这个问题的道路 - 如果我知道哪种方法是正确实现这一目标的最佳方式,我可以专注于这种方法&amp;尝试进行更深入的调试。谢谢!

2 个答案:

答案 0 :(得分:1)

$.restrict()正是出于此目的。

答案 1 :(得分:1)

有助于改善游戏的两件事:

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

    <input type="text" id="form" class="form-control" placeholder="guess" maxlength="1">

  2. 要仅限制字母输入并防止空字符串猜测,请将以下内容添加到(".form-control").keypress函数

  3. 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.");
    }
    
相关问题