Onclick event + Enter key

Question

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

Just look for same already answered questions: https://stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the-enter-key-in-a-text-box — Matus, Jun 20 '17 at 14:36

score 2 · Answer 1 · answered Jun 20 '17 at 14:37

2

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

answered Jun 20 '17 at 14:37

Big Bad Waffle

307
1
6

this is almost perfect, the only question is if the password is right than it doesn´t happen anything – questionador Jun 20 '17 at 15:56
@questionador Are you using a form to send the data? If so, you have to use javascript to submit it too. – schroffl Jun 20 '17 at 16:24
@questionador If the password is right, `validatePass` just returns `true`. What do you expect to happen? And I just realized that your function is called in the anchors `onclick` so my question about the form was kind of stupid... – schroffl Jun 20 '17 at 16:39
@schroffl in the function i use, when i click on the login button it validates the password and directs me to another page, it´s a rudimentary kind of login, i know. what i pretend is, after entering the password, the enter key having the same effect that clicking the Login button does – questionador Jun 20 '17 at 16:44
@questionador In your `onkeydown` handler you have to click the anchor. Get a reference to your element (e.g. via its id) and call `element.click()`. Also: As @YongQuan said, it's better to use `addEventListener` instead of directly assigning to the `onkeydown` property of an element. – schroffl Jun 20 '17 at 16:52
sorry @schroffl i didn´t get it... like i have on: onclick="javascript:return validatePass()" but using onkeydown instead of onclick? – questionador Jun 21 '17 at 16:47
@questionador No, you leave your `onclick` on your login button. But in your script you add an event-listener for the `keydown` event where you simulate a click on the button (via the `click` method of the `a` element). You won't even have to call `validatePass` in your `keydown` listener, because the button itself will do it when clicked. And just a sidenote: Please never validate passwords on the client side (I assume this is just for learning). – schroffl Jun 22 '17 at 09:51

yqlim · Answer 2 · 2017-06-20T15:11:35.557

1

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.

edited Jun 20 '17 at 15:11

answered Jun 20 '17 at 14:39

yqlim

6,898
3
19
43

You probably also want to attach the listener only to the `input` element. Otherwise this will be triggered even if the user is not entering the password. – schroffl Jun 20 '17 at 14:42
@schroffl the listener should be attached to `document` instead of `input` otherwise it will not trigger if input is not focused. Just add a line to make sure targeted `input` is not empty will do. – yqlim Jun 20 '17 at 14:50
But if the user is entering the password the element is focused. And if he then hits the enter key it works. Why would he deselect the element and then press it? I don't see a problem with attaching it to the input. – schroffl Jun 20 '17 at 14:54
how do i attach the listener to the input listener? because it works if no password is typed, but as soon as any other key is pressed it doesn´t function – questionador Jun 20 '17 at 15:00
@schroffl he might wander off the password field after filling in. it's a possibility. – yqlim Jun 20 '17 at 15:09
@questionador updated the code. you should know how to amend and edit it from here on. – yqlim Jun 20 '17 at 15:12
@YongQuan Sure, but if he wanders off and intends to press the enter key on another element, `validatePass` would also be called. Even if he only wanted to open a dropdown (or whatever there might be on a page). So I would still argue that it's more intiutive to attach it to the input. We could probably continue this discussion, because in the end it depends on a lot more factors. I guess you can use whatever floats your boat ^^ – schroffl Jun 20 '17 at 15:14
@schroffl cheers. whatever solves the problem is the solution. both with respective pros and cons (y) <-- facebook like icon fyi – yqlim Jun 20 '17 at 15:16

quinz · Answer 3 · 2017-06-20T15:02:14.450

0

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>

edited Jun 20 '17 at 15:02

answered Jun 20 '17 at 14:38

quinz

1,282
4
21
33

score 0 · Answer 4 · answered Jun 20 '17 at 14:41

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!

score 0 · Answer 5 · answered Jun 20 '17 at 14:43

0

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

answered Jun 20 '17 at 14:43

Biplab Malakar

750
6
11

It would be good if you'll add short explanations in your answer. – Roopendra Jun 21 '17 at 05:29

Soft Dev · Answer 6 · 2017-06-20T15:00:38.300

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>

the snippet doesn´t work. when you introduce the correct password the enter key just validates but nothing happens — questionador, Jul 07 '17 at 10:59

Onclick event + Enter key

6 Answers6