按回车键后无法更改页面

Question

我一直在一个网站上工作，但由于某种原因，当我点击进入时它停留在同一页面上。但是，当我单击我在页面本身上添加的按钮时，它就起作用了。我想做的是在验证密码后从我的登录页面 index.html 转到我的主页 home.html。有什么想法吗？

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="/popup.css?Version=1.1">
    </head>
    <body>
        <div id="box">
            <form id="myform-search" method="post" autocomplete="off">
            <h1>Enter Password</h1>
              <p>
                <input type="password" value="" placeholder="Enter Password" id="p" class="password">
                <button class="unmask" type="button" onclick="toggle()"></button>
                <button class="enter" type="button" onclick="done()">Enter</button>
              </p>
            </form>

          </div>
          <div id="wrong">
            <p>Sorry, but the password you entered is incorrect!</p>
        </div>

            <!--Javascript to show password Box-->
            <script>

                //Verifies password
                function done() { 
    document.getElementById("box").style.display = "none";
    var password = document.getElementById("p").value;
    if (password == "12345") {
       location.replace("http://apr.great-site.net/Home/home.html");
    } else {
        document.getElementById("wrong").style.display = "block";
    }

};

function toggle() {
  var x = document.getElementById("p");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}
            </script>
    </body>
</html>
```````````````````````````````````````````

Answer 1

试试这个：

<form onSubmit="done()">
              <p>
                <input type="password" value="" placeholder="Enter Password" id="p" class="password">
                <button class="unmask" type="button" onclick="toggle()"></button>
                <button type="submit" class="enter">Enter</button>
              </p>
            </form>

Answer 2

 // Verifies password
 function done() { 
    document.getElementById("box").style.display = "none";
    var password = document.getElementById("p").value;
    if (password == "12345") {
       // returning true will submit the form
       return true;
    } else {
        document.getElementById("wrong").style.display = "block";
        // returning false will prevent submiting the form
        return false;
    }
};

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="/popup.css?Version=1.1">
    </head>
    <body>
    
        <div id="box">
            <form id="myform-search" method="post" action="validationUrlHere" autocomplete="off" onsubmit="return done();">
            <h1>Enter Password</h1>
              <p>
                <input type="password" value="" placeholder="Enter Password" id="p" class="password">
                <!-- Commented this button as it is not needed in the context of the solution -->
                <!--<button class="unmask" type="button" onclick="toggle()">something</button>-->

                <!-- HERE is the interesting part : -->

                <!-- Clicking the "Enter" button has same effect as -->
                <!-- hitting the default submit button or pressing the Enter button on your -->
                <!-- keyboard. Your cursor focus must be inside one of the form's elements, -->
                <!-- preferably in the password input field -->
                <button class="enter" type="button" onclick="done()">Enter</button>
                <input type="submit" value="Real Submit" />
              </p>
            </form>
          </div>
          
          <div id="wrong" style="display: none;">
            <p>Sorry, but the password you entered is incorrect!</p>
        </div>
    
    </body>
</html>

看看这个片段，从中获取你需要的东西。说实话，不清楚你在寻找什么......希望它能帮助你了解一些基础知识:-)

Answer 3

如果您希望在您按下回车键时调用 done() 函数，您应该在您的表单上为 Enter 添加一个事件侦听器。（请记住，您打开了 2 个表单标签）

document.getElementById('myform-search').addEventListener('keyup', function(e) {
    if(e.key=='Enter') {
        done()
    }
}

按回车键后无法更改页面

I can't get my page to change after I hit the enter key

html

css

forms

input

submit