CODEWITHSUNDEEP
javascripthtmlauthenticationonclick
questionador
questionador

Reputation: 113

Onclick event + Enter key

i have a really simple login script on a website, it uses just 1 simple password, and it does just fine what i need from it. thing is, it only works when clicking the "LOGIN" word. what i need it to do is to also work when pressing the Enter key. here´s the code:

<div style="background-image:url(images/IMG_Log_In_teste.jpg);width:1490px;height:243px;color:black;font-size:20px;" >
        <br></br>
        <a href="areaclienteOLD.html" onclick="javascript:return validatePass()">
        <div class="cities">
            <font color="white">                            
                LOGIN
            </font>
        </div>
        </a><br></br>
        <input id='PASSWORD' type='PASSWORD'  />
        <a href="areaclienteOLD.html" onclick="javascript:return validatePass()"></a><br></br>
        <script>
            function validatePass(){
            if(document.getElementById('PASSWORD').value == 'pkmass1725'){
            return true;
                }else{
            alert('Password errada! Tente de novo.');
                    return false;
                }
            }
        </script>                       
    </div>

i already tried adding input types and other things but nothing makes it work :(

UPDATE:

meanwhile i changed the code to this:

<div style="background:blue;width:1490px;height:243px;color:black;font-size:20px;" >
        <a href="areaclienteOLD.html" onclick="javascript:return validatePass()">
        <div class="cities">
            <font color="white">                            
                LOGIN
            </font>
        </div>
        </a>
        <input id='PASSWORD' type='PASSWORD'  onkeydown="javascript:return validatePass()"/>
        <a href="areaclienteOLD.html" onclick="javascript:return validatePass()"></a>
        <script>
            function validatePass(){
            if(document.getElementById('PASSWORD').value == 'pkmass1725'){
            return true;
                }else{
            alert('Password errada! Tente de novo.');
                    return false;
                }
            }
        </script>   

        <script>
            document.body.onkeydown = function(e) {
                if (e.keyCode == 13)
                validatePass();
            };
        </script>

    </div>

but now whatever key is pressed it performs validation, so its not even possible to enter the password... i´m still missing something here

Upvotes: 2

Views: 12642

Answers (6)

yqlim
yqlim

Reputation: 7098

Attach it to document:

document.addEventListener('keydown', function(e){
    if (document.getElementById('PASSWORD').value === '') return;
    if (e.which === 13) validatePass();
    // e.which === 13 means enter key is pressed.
});

Attach it to <input id="PASSWORD">:

document.getElementById('PASSWORD').addEventListener('keydown', function(e){
    if (document.getElementById('PASSWORD').value === '') return;
    if (e.which === 13) validatePass();
    // e.which === 13 means enter key is pressed.
});

Using addEventListener is the preferred way because it does not override other functions bind to onkeydown event.

Upvotes: 1

quinz
quinz

Reputation: 1342

Alternative for JavaScript would be to add type="submit" to the HTML. Most browsers bind that with Enter by default.

Example: <button type="submit" onclick="validatePass()>LOGIN</button>

Upvotes: 0

Soft Dev
Soft Dev

Reputation: 1

For a complete solution look below (changed the login link to black so you can see it):

function validatePass() {
  if (document.getElementById("PASSWORD").value == 'pkmass1725') {
    // do something if the password was correct
    return true;
  } else {
    alert('Password errada! Tente de novo.');
    return false;
  }
}

function validateOnEnter(event) {
  var key = event.which || event.keyCode;
  if (key == 13) { // enter pressed then invoke the validation method
    validatePass();
  }
}
<div style="background-image:url(images/IMG_Log_In_teste.jpg);width:1490px;height:243px;color:black;font-size:20px;">
  <br></br>
  <a href="#" onclick="return validatePass()">
    <div class="cities">
      <font color="black">                            
                LOGIN
            </font>
    </div>
  </a>
  <br></br>
  <input id='PASSWORD' type='PASSWORD' onkeypress="validateOnEnter(event)" />
  <a href="#" onclick="return validatePass()"></a>
  <br></br>
</div>

Upvotes: 0

Biplab Malakar
Biplab Malakar

Reputation: 788

onkeyup = fun1(e) 
in password textbox add this event
in script
fun1(e){
if (e.which == 13 || e.keyCode == 13){
       validatePass();
}

Upvotes: 0

Surreal
Surreal

Reputation: 1047

First, lets make a method to read the enter key that will call your login method

function inputKeyUp(e) {
e.which = e.which || e.keyCode;
if (e.which == 13) {
    validatePass();
}

}

next, lets call that method in the correct spot in the HTML

 <input id='PASSWORD' type='PASSWORD'  onkeyup="inputKeyUp(event)" />

And that should do it!

Upvotes: 0

Big Bad Waffle
Big Bad Waffle

Reputation: 404

document.body.onkeydown = function(e) {
    if (e.keyCode == 13)
        validatePass();
};

Upvotes: 2

Related Questions