将“提交”按钮响应键盘按键而不是点击

4 浏览
0 Comments

将“提交”按钮响应键盘按键而不是点击

我正在为一个游戏制作一个加载屏幕。用户将输入密码，并给出一个关卡的链接。我想要移除提交按钮，通过按下键盘上的“回车”键来激活功能，但我不确定如何将其实现到我的代码中。

我找到了这段代码，我想象它会起作用：Jquery: how to trigger click event on pressing enter key

我已经多次尝试使用那个答案中的代码，让“回车”键激活提交按钮，但我无法让它起作用。我对JavaScript还是很新手，像这样修改代码仍然让我感到困惑。在这种情况下，我如何让提交按钮在按下“回车”键时作出响应？下面是我正在使用的代码，JSFiddle应该清楚地显示它的目的。如果您输入“level one”、“level two”或“level three”，您将得到“正确”的响应。否则，您将得到“错误”。

$(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%;
}


加载
正确
正确
正确
密码不正确

0

3 答案

0 Comments

问题出现的原因是为了让"submit"按钮响应键盘按键而不是鼠标点击。解决方法是使用e.keyCode || e.which来检查按键代码，并确保它是13。将13定义为常量ENTER可以使代码更清晰。此外，可以减少代码量，因为正确的密码基本上等于要显示的id。

解决方法如下：

1. 创建一个常量ENTER，将其值设置为13。

2. 创建一个isValid函数，接收一个参数input。在函数内部，使用valid.indexOf(input)判断input是否在valid数组中。

3. 创建一个submit函数，用于处理提交操作。在函数内部，首先使用$(".all").hide("fast")隐藏所有显示的元素。然后，使用$('#passwordinput').val().toLocaleLowerCase()获取输入框的值，并转换为小写。接下来，使用isValid函数判断输入的值是否有效。如果有效，则使用$("#" + input.replace(' ', '')).show("fast")显示对应的元素；否则，使用$("#incorrect").show("500")显示密码错误的提示信息。

4. 在文档就绪时，使用$("#buttonsubmit").click(submit)将提交按钮的点击事件绑定到submit函数上。同时，使用$("#passwordinput").change(function())绑定输入框的改变事件，当输入框的值改变时，隐藏密码错误的提示信息。另外，使用$("#passwordinput").on('keydown', function(e))绑定输入框的键盘按下事件，当按下的键码等于ENTER时，调用submit函数。

以上就是原因和解决方法的整理。

0
0 Comments

问题的出现原因：原来的代码中的“submit”按钮只有在点击时才会触发响应，但是需要改为在按键按下时触发响应。

解决方法：需要检查文档对象的keydown事件，判断按键的键码是否为13（回车键）或者可能是10（Ctrl+回车键）。可以使用jQuery中的event.which来获取键码，并且这个方法提供了跨浏览器的支持。

代码如下：

$(document).ready(function() {
  $(document).on("keydown", function(event) {
    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");
      }
    }
  });
});

CSS样式为：

.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%;
}

HTML代码为：




  
load

  

    
correct

    
correct

    
correct

    
incorrect password

感谢您的帮助。这个答案对我来说是最容易理解的，因为我的原始代码没有改变。然而，只有当我去掉“alert(event.which);”这一行时，代码才能正常工作。我忘了提到我正在使用Electron，而这行代码似乎引起了问题。

嵌入了`alert()`只是为了测试，不用担心将其删除。

0
0 Comments

问题的出现原因：当前的架构会在项目的扩展过程中给你带来困扰。你需要将你的代码库中的“应用程序执行的任务”和“触发任务发生的事件”作为相关但不同的事物来思考。例如，你的submit函数中的逻辑应该被移动到一个不关心如何调用它的函数中。

解决方法：将逻辑代码移动到一个不关心如何调用的函数中，然后可以从任何你想要的地方调用这个函数，甚至可以从多个地方调用。另外，可以进一步改进这个例子，unlockLevel函数应该避免在其中硬编码元素选择器，而是应该在其他地方定义，这样如果以后更改选择器，你只需要更新一行代码而不是整个代码库。

关键代码：

function getEnteredPassword(){
    $('#passwordinput').val().toLocaleLowerCase();
}
function unlockLevel(password){
    $(".all").hide("fast");
    if (password == "level one") {
        $("#levelone").show("fast");
    } else if (password == "level two") {
        $("#leveltwo").show("fast");
    } else if (password == "level three") {
        $("#levelthree").show("fast");
    } else {
        $("#incorrect").show("500");
    }
}
var KEY_ENTER = 13;
$(document.body).keyup(function(event) {
    var key = event.which;
    if (key === KEY_ENTER) {
        unlockLevel( getEnteredPassword() );
        event.preventDefault();
    }
});
$("#buttonsubmit").click(function() {
   unlockLevel( getEnteredPassword() );
});

最后的建议：将核心游戏逻辑与UI层分开。事件和元素应该被隐藏在一个函数后面，并通过这个函数进行访问。这样做可以使你的代码更易读和维护。你可以在不对游戏逻辑进行最小更改（如果有的话）的情况下改变UI（元素、事件等）。

IMHO，给var key起一个变量名是不必要的，因为你只在声明后的下一行中使用了key变量。我更喜欢代码的清晰性。命名变量有助于传达意图，通常更易读。一个好的压缩工具可以轻松解决这个问题。

谢谢你的答案和建议！

0