Question

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

我发现这个代码我想象会起作用：Jquery: how to trigger click event on pressing enter key

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

<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>

type go

go is hashed (/usr/local/go/bin/go)

Answer 1

您需要检查document对象的keydown事件，以获取13（ ENTER ）和10的密钥代码}（ CTRL ENTER ）。

不同的浏览器为我们提供了获取密钥代码的不同方法，但由于您使用的是JQuery，我们可以使用 event.which 来抽象它并提供良好的跨浏览器支持。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用e.keyCode || e.which检查密钥代码，并确保密码为13。我将13定义为常量ENTER以使代码更清晰。此外，您可以减少代码量，因为正确的密码基本上等于您要显示的ID：

let valid = ["level one", "level two", "level three"];
const ENTER = 13;
function isValid(input) {
    return valid.indexOf(input) !== -1;
}

function submit() {
    $(".all").hide("fast");
    var input = $('#passwordinput').val().toLocaleLowerCase();
    if (isValid(input)) {
        $("#" + input.replace(' ', '')).show("fast");
    } else {
      $("#incorrect").show("500");
    }
}

$(document).ready(function() {
    $("#buttonsubmit").click(submit);

    $("#passwordinput").change(function() {
        $("#incorrect").hide("500");
    });

    $("#passwordinput").on('keydown', function(e) {
        var keypressed = event.keyCode || event.which;
        if (keypressed == ENTER) {
            submit();
        }
    });
});

.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 3

随着项目的发展，您当前的架构会让您受伤。你需要在你的代码库中考虑“事物 - 你的应用程序”和“事件 - 使事情发生”作为相关但不同的事物。

因此，例如，submit函数中的逻辑应该移动到一个并不真正关心如何调用它的函数中：

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() );
        // The event is handled... don't do other stuff
        event.preventDefault();
    }
});

$("#buttonsubmit").click(function() {
   unlockLevel( getEnteredPassword() );
});

你可以，而且可能应该更进一步。您的unlockLevel函数可能不应该包含硬编码元素选择器...这应该在其他地方定义，这样如果您稍后更改选择器，您只需要更新一行代码而不是爬行整个代码库。

重点是将核心游戏逻辑与UI层分开。事件和元素应隐藏在后面并通过一次性函数访问（或者，随着复杂性的增长，对象实例）。这使您的代码更易于阅读和维护。您可以使用非常小的更改（如果有）将UI（元素，事件等）更改为游戏逻辑。

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

3 个答案: