javascript验证和验证点击或输入

Question

I have a login script date validates on clicking the submit button.

 // Below function Executes on click of login button. function validate(){ var password = document.getElementById("passid").value; if ( password == "thisisthepassword"){ window.location = "loggedin.html"; // Redirecting to other page. return false; } }

 <form id="code" method="post"> <div class="form-group"><input class="form-control" type="password" name="passid" id="passid""></div> <div class="form-group"> <button class="btn btn-primary btn-block" type="button" value="Login" id="submit" onclick="validate()" style="border: none;">Login</button></div> </form>

Now I want this script to also run when the enter key is pressed after entering the code, but none of the examples I find seems to work in combination with what I already have

Answer 1

我想，您可以更改要提交的按钮类型，并在表单元素上使用 onsubmit="validate()" 事件而不是您在按钮上使用的 onclick 事件

Answer 2

See the snippet below, I've added an event listener that will trigger a button click when enter is pressed. This will still run the same validation that occurs when you click the button.

 function validate() { var password = document.getElementById("passid").value; if (password == "thisisthepassword") { window.location = "loggedin.html"; // Redirecting to other page. return false; } } //This code will trigger a button click when "enter" is pressed. var input = document.getElementById("passid"); input.addEventListener("keyup", function(event) { // keyCode 13 is the "Enter" key on the keyboard if (event.keyCode === 13) { // Prevent default action event.preventDefault(); // Trigger the button element with a click document.getElementById("submit").click(); } });

 <form id="code" method="post"> <div class="form-group"> <input class="form-control" type="password" name="passid" id="passid" "></div> <div class="form-group "> <button class="btn btn-primary btn-block " type="button " value="Login " id="submit " onclick="validate() " style="border: none; ">Login</button></div> </form>