javascript - 让 "submit"按钮响应按键而不是单击

Question

我正在为游戏制作加载屏幕。用户将写一个密码，并且给出了该级别的链接。我想删除提交按钮并通过按键盘上的“enter”激活该功能，但我不确定如何将其实现到我的代码中。

我发现这段代码我认为可以工作:Jquery: how to trigger click event on pressing enter key

我已经多次尝试使用该答案中的代码来使“输入”激活提交按钮，但我无法让它工作。我对 javascript 很陌生，像这样更改代码仍然让我感到困惑。在这种情况下，如何使提交按钮响应“输入”？下面是我正在使用的代码，JSFiddle 应该清楚地显示它的目的。如果您键入“一级”、“二级”或“三级”，您将得到“正确”的响应。任何其他你会得到“不正确”的东西

$(document).ready(function() {
  $("#buttonsubmit").click(function() {
    $(".all").hide("fast");
    if ($('#passwordinput').val().toLocaleLowerCase() == "level one") {
      $("#levelone").show("fast");
    } else if ($('#passwordinput').val().toLocaleLowerCase() == "level two") {
      $("#leveltwo").show("fast");
	} else if ($('#passwordinput').val().toLocaleLowerCase() == "level three") {
      $("#levelthree").show("fast");
    } else {
      $("#incorrect").show("500");
    }
  });
  $("#passwordinput").change(function() {
    $("#incorrect").hide("500");
  });
});

.loadmenu {
	margin-top:0%;
	width:100%;
	height:100%;
	background:black;
	position:absolute;
	z-index: 17;
}
.loadtitle{
	width:90%;
	height:10%;
	margin-left:5%;
	margin-top:10%;
	background:transparent;
}
.loadinput {
	width:100%;
	height:10%;
	line-height:20px;
	margin-left:5%;
	margin-top:10%;
	background:transparent;
}
#passwordinput{
	font-size: 30px;
	width:85%;
	display:block !important;
}
#buttonsubmit{
	margin-top:3%;
	font-size: 26px;
	padding:5px;
	display:block !important;
}


#levelone {
  display: none;
  color:white;
  padding-bottom:10%;
}
#leveltwo {
  display: none;
  color:white;
  padding-bottom:10%;
}
#levelthree {
  display: none;
  color:white;
  padding-bottom:10%;
}
#incorrect {
  display: none;
  color:white;
  padding-bottom:10%;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loadmenu" id="loadmenu">
 <div class="loadtitle">
load
</div>
<div class="loadinput">
<div class="all" id="levelone">
 correct
</div>
<div class="all" id="leveltwo">
 correct
</div>
<div class="all" id="levelthree">
 correct
</div>
<div class="all" id="incorrect">
incorrect password
</div>
<input type='text' id="passwordinput" />
<input type='button' id="buttonsubmit" value="Submit" />
</div>

  </div>

Answer 1

您需要检查 document 对象的 keydown 事件以获取 13 的键码 (ENTER) 和可能是 10(CTRLENTER)。

不同的浏览器给我们提供了不同的获取键码的方法，但是既然你用的是JQuery，我们可以用 event.which 它将抽象出来并提供良好的跨浏览器支持。

$(document).ready(function() {

  // Listen for keydown on the document
  // The callback function will be passed a reference to that
  // event and we should set up an argument to capture the reference
  $(document).on("keydown", function(event) {
  alert(event.which);
    // Check for ENTER key press
    // Different browsers use different event properties to provide
    // the key code. JQuery abstracts this for us if we use event.which
    if(event.which === 13 || event.which === 10){
    
      $(".all").hide("fast");
      if ($('#passwordinput').val().toLocaleLowerCase() == "level one") {
        $("#levelone").show("fast");
      } else if ($('#passwordinput').val().toLocaleLowerCase() == "level two") {
        $("#leveltwo").show("fast");
	    } else if ($('#passwordinput').val().toLocaleLowerCase() == "level three") {
        $("#levelthree").show("fast");
      } else {
        $("#incorrect").show("500");
      }
    }
    
    $("#passwordinput").change(function() {
      $("#incorrect").hide("500");
    });
  });
});

.loadmenu {
	margin-top:0%;
	width:100%;
	height:100%;
	background:black;
	position:absolute;
	z-index: 17;
}
.loadtitle{
	width:90%;
	height:10%;
	margin-left:5%;
	margin-top:10%;
	background:transparent;
}
.loadinput {
	width:100%;
	height:10%;
	line-height:20px;
	margin-left:5%;
	margin-top:10%;
	background:transparent;
}
#passwordinput{
	font-size: 30px;
	width:85%;
	display:block !important;
}
#buttonsubmit{
	margin-top:3%;
	font-size: 26px;
	padding:5px;
	display:block !important;
}


#levelone {
  display: none;
  color:white;
  padding-bottom:10%;
}
#leveltwo {
  display: none;
  color:white;
  padding-bottom:10%;
}
#levelthree {
  display: none;
  color:white;
  padding-bottom:10%;
}
#incorrect {
  display: none;
  color:white;
  padding-bottom:10%;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loadmenu" id="loadmenu">
 <div class="loadtitle">load</div>
 <div class="loadinput">
   <div class="all" id="levelone">correct</div>
   <div class="all" id="leveltwo">correct</div>
   <div class="all" id="levelthree">correct</div>
   <div class="all" id="incorrect">incorrect password</div>
   <input type='text' id="passwordinput">
 </div>
</div>