CODEWITHSUNDEEP
javascripthtml
ersbygre1
ersbygre1

Reputation: 181

How to trigger HTML password input on enter press

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>

Upvotes: 0

Views: 2664

Answers (1)

Angel Politis
Angel Politis

Reputation: 11313

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;
};

Upvotes: 2

Related Questions