按回車鍵時如何調用 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