用键盘jquery限制键盘输入 [英] restricting keyboard input with keypress jquery

查看：132
本文介绍了用键盘jquery限制键盘输入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用游戏创建的按键功能，以带有输入按钮的形式输入用户输入（并且首先按下Enter键确定一系列我定义的功能）。

  $（。form-control）.presspress（function（event）{
 var keycode =（event.keyCode？ （keycode == 13）{
 var space = $（this）.val（）。toLowerCase（）; 
 
 if（event.keyCode：event.which）; 
 if （！（wrongGuesses.indexOf（space）> -1 || rightGuesses.indexOf（space）> -1））{
 play（space）; 
 $（this）.val（' ）; 
 endGame（）; 
 return false; 
} 
 else 
 window.alert（您已经猜到了这封信。）; 
 
} 
}）;

这很好用。但是，现在，我试图限制用户只能够输入字母和符号。一次只有一个 - 我想限制除了单个字母之外的任何东西被首先输入，然后让我的按键事件绑定到输入键之后 - 我尝试过这样做：


$ b $ 

  $（。form-control）。keypress（function（event）{
 var keycode =（event.keyCode？event （keycode> = 65&& keycode< = 90））{
 event.preventDefault（）; 
} $ b （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（你已经猜到了这个 信。）; 
 
} 
 //} 
}）;

不起作用（我觉得语法错误）&它扰乱了我的游戏功能;
然后我试过：

$ p $ $（。form-control）.presspress（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已经猜到了这封信。）;

}
}）;

这也不起作用。
我也试过创建另一个函数，只是处理限制输入信号的单独函数，这个函数与绑定到游戏中的输入键相关，该函数也没有工作/导致输入不触发这些事件（或我的游戏不显示猜测的字母或将正确的猜测记录为错误的猜测），并且如果（键码> 65 ||键码<90）也造成了也引起游戏或显示错误的条件语句&我不确定我应该如何去做这件事 - 我已经尝试了许多不同的方法，并且没有成功。一些建议/建议将非常感谢。
如果您需要了解整个游戏的工作原理，请参阅我的小提琴的链接：
https ：//jsfiddle.net/KindeR99/wuftst3t/



编辑**：我试过.alpha（）jquery插件（尽管我'我喜欢找到一个原生的JS / jQuery解决方案），这也没有为我工作（但我可能没有使用它的权利）。我不确定为什么这些解决方案没有工作/要么不限制输入或弄乱我的游戏功能。我也尝试过这种方法，W / REG表达式：

  $（。form-control）.presspress（function事件）{
 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 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（您已经猜到了这封信。）; 
 
} 
 else 
 {
 event.preventDefault（）; 
} 
}）;

但他们都弄乱了我的游戏或游戏功能的html显示（& I'm not确定哪个是解决这个问题的最佳方法，并且这对我的游戏的功能影响最小）。这并不重要，只有在按下输入键后才能输入输入内容 - 我只是希望能够保持游戏的功能。我不确定哪条路可以解决这个问题 - 如果我知道哪种方法是正确执行此操作的最佳方法，那么我可以只关注该方法和解决方案。尝试进行更深入的调试。

解决方案

有两件事情可以帮助你提高游戏质量：

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



    < input type =textid =formclass =form-controlplaceholder =guessmaxlength =1>


  • 要仅限制字母输入并防止空字符串猜测，请将以下内容添加到（。form-control）。 $ c $> b










    $ var keycode = event.keyCode？ event.keyCode：event.which; （（keycode< 64 || keycode> 91）&& amp;（keycode< 96 || keycode> 123）&& keycode！== 13）
    返回false; （keycode == 13）{
    var space = $（this）.val（）。toLowerCase（）;


    if

    if（space ==''）{
    window.alert（请输入一个猜字母）
    return false;


    if（wrongGuesses.indexOf（space）> -1 || rightGuesses.indexOf（space）> -1）{
    play（space）;
    $（this）.val（''）;
    endGame（）;
    返回false;
    }
    else
    window.alert（你已经猜到了这封信。）;
    }


    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!

    解决方案

    Two things to help improve your game:

    1. 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">

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

    这篇关于用键盘jquery限制键盘输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

    • 查看全文
    相关文章
    其他开发最新文章
    热门教程
    热门工具
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆