How to trigger HTML password input on enter press

Question

I'd like to build a password prompt screen that redirects you somewhere after entering the correct password and pressing Enter . However, currently it only works by clicking the "Submit" button. I'd appreciate any help on how to adapt this code:

Here's what my code looks like for now:

 function checkPswd() { var confirmPassword = "asdf"; var password = document.getElementById("pswd").value; if (password == confirmPassword) { window.location.replace('http://www.google.com'); } } 

 @import url('https://fonts.googleapis.com/css?family=VT323'); body { background-color: #ffffff; display: table; } .div1 { height: 100%; width: 100%; display: table; position: absolute; top: 0; left: 0; } .div2 { text-align: center; display: table-cell; vertical-align: middle; font-family: VT323; font-size: 25px; color: #656262; } .box { text-align: center; font-size: 20px; font-family: VT323; outline: none; width: 250px; height: 35px; border: none; border-bottom: 2px solid #656262; } .confirm { border: none; font-size: 20px; font-family: VT323; margin-top: 10px; color: #656262; background-color: rgba(0, 0, 0, 0); cursor: pointer; } 

 <div class="div1"> <div class="div2"> <form> <input class="box" type="password" placeholder="123" id="pswd"> <br> <input class="confirm" type="button" value="SUBMIT" onclick="checkPswd();" /> </form> </div> </div> 

Answer 1

You can use the keyup event to detect when a key is pressed and then check if its code is 13 , the code of Enter . If so, you can submit your form, or in your case call checkPswd .

Code:

/* Cache the password input. */
var pswd = document.getElementById("pswd");

/* Call 'checkPswd' when the 'Enter' key is released. */
pswd.onkeyup = function (e) {
   if (e.which == 13) checkPswd();
};

/* Prevent the form from submitting. */
pswd.parentElement.onsubmit = function () {
   return false;
};