按回车键时如何调用 function？

Question

我正在为我的网站制作密码。 如何通过按回车键而不是按提交按钮来检查密码是否正确？ 帮助将不胜感激。

<html>
 <script>
  function checkPassword() {
   var password = document.getElementById("passwordBox");
   var passwordText = password.value;
   if(passwordText == "password") {
    alert("you got it right");
    return true;
   }
   alert("you got it wrong");
   return false;
   }
   
 </script>
</head>
<body>
 <p style="font-size: 30pt;">something</p>
 <p>Please enter the password to uh... something </p>
 <p>Password: <input id="passwordBox" type="password"/></p>
 <button onclick="return checkPassword();">
    Submit
 </button>
</html>

Answer 1

处理enter键的最简单方法是将其包装在表单中并在表单上设置onSubmit并在按钮上设置type="submit" 。

这是示例。

<html>
    <head>
        <script>
        function checkPassword() {
            var password = document.getElementById("passwordBox");
            var passwordText = password.value;
            if (passwordText == "password") {
            alert("you got it right");
            return true;
            }
            alert("you got it wrong");
            return false;
        }
        </script>
    </head>
    <body>
        <p style="font-size: 30pt">something</p>
        <p>Please enter the password to uh... something</p>

        <form onsubmit="checkPassword()">
        <p>Password: <input id="passwordBox" type="password" /></p>
        <button type="submit">Submit</button>
        </form>
    </body>
</html>

Answer 2

将您的输入和按钮包装在<form>标记中并使用提交侦听器您不需要编写 onclick 并逐个输入，这将在代码中大混乱，在按钮元素 ise type="submit"这意味着它是form的一部分，如果您单击输入或按钮，它将执行 function，我还删除了 return true和false因为它在代码中没有任何意义还阅读了什么是e.preventDefult()

 const passInput = document.getElementById("passwordBox") const form = document.getElementById("form") form.addEventListener("submit", (e) => { e.preventDefault() var passwordText = passInput.value; if(passwordText == "password") { alert("you got it right"); }else alert("you got it wrong"); })

 <p style="font-size: 30pt;">something</p> <p>Please enter the password to uh... something </p> <form id="form"> <p>Password: <input id="passwordBox" type="password" /></p> <button type="submit">Submit</button> </form>

按回车键时如何调用 function？

问题描述

2 个解决方案

解决方案1
1 2021-12-02 19:36:02

解决方案2
0 2021-12-02 19:36:24

按回车键时如何调用 function？

问题描述

2 个解决方案

解决方案1 1 2021-12-02 19:36:02

解决方案2 0 2021-12-02 19:36:24

解决方案1
1 2021-12-02 19:36:02

解决方案2
0 2021-12-02 19:36:24