Combine onclick and onkeypress

Question

I have this html form, which does not actually sends data to a php file, buts sends data to a javascipt function.

Works fine if I click the button, but when I hit enter nothing happens.

I would like the button to work if clicked on with the mouse or the user hits enter.

How do I fix this? Thanks

       <input type="button" value="Reveal Now" style="margin: 3px;font-family: 'festivo_lcbasic', Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:26px; text-decoration:none; font-weight:normal; padding-top: 10px;"  onclick="check(this.form.Pass.value)"  onkeypress="check(this.form.Pass.value)"/>
  </form>

  <script type="text/javascript">

  var password = ["#123, #345"];

  function check(pass) {
    for(a = 0; a < password.length; a++) {
      if (pass == password[a]) {
        top.location.href="enter.html";
        return;
      }
    }
    location.href="incorrect.html";
  }

  </script>

Probably a duplicate from http://stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the-enter-key-in-a-text-box or http://stackoverflow.com/questions/29943/how-to-submit-a-form-when-the-return-key-is-pressed or http://stackoverflow.com/questions/905222/enter-key-press-event-in-javascript — phil652, Feb 26 '15 at 20:04
Why not make the button a submit button, and capture the `onsubmit` event of the form instead ? — adeneo, Feb 26 '15 at 20:07
@BabakBehzadi I am not sure what you mean by focused. There is nothing really on this page but passing a person entering the simple code and hitting return. There is nothing else on the page but a button with this function. — user3776718, Feb 26 '15 at 20:11
@user3776718 by default, a single button on a html page is not focused(selected). For input buttons you have to ways to set them focused: click on them or pressing tab to seek buttons. If you don't want to do this, you'd better set onpresskey for body tag with a special character, e.g. enter, sensitivity. — Babak Behzadi, Feb 26 '15 at 20:16

itzMEonTV · Accepted Answer · 2015-02-26T20:29:26.763

I think you are trying to check something when user enters enter-key when typing in text field. I am assuming your input text is like

<input type="text" id="Pass" />

to

<input type="text" id="Pass"  onkeypress="runScript(event)" />

and add this function too in your script

function runScript(e) {
    if (e.keyCode == 13) {
        var pas = document.getElementById("Pass").value;
        check(pas) //calling your button function

    }
}

Complete script:

<script type="text/javascript">

var password = ["#123, #345"];

function check(pass) {
for(a = 0; a < password.length; a++) {
    if (pass == password[a]) {
       top.location.href="enter.html";
        return;
    }
  }
  location.href="incorrect.html";
}

function runScript(e) {
    if (e.keyCode == 13) {
        var pas = document.getElementById("Pass").value;
        check(pas) //calling your button function

    }
}

</script>

OR:

<input type="text" id="Pass"  onkeypress="runScript(event, this.value)" />

script:

function runScript(e, pas) {
    if (e.keyCode == 13) {
        check(pas) //calling your button function

    }
}

why the extra runScript() function? – dlite922 Feb 26 '15 at 20:09 — dlite922, Feb 26 '15 at 20:09
`runScript` to check `keyCode` – itzMEonTV Feb 26 '15 at 20:14 — itzMEonTV, Feb 26 '15 at 20:14

score 0 · Answer 2 · answered Feb 26 '15 at 20:08

Your code is terrible for many reasons that I don't get into now, but if you look in your javascript console (chrome/firefox) you'll see this error:

Here's how i fixed your code. 1. Added ID 'myButton' to your 2. Passed 'myButton' to your check() function 3. Used getElementById() to get to your from the function

<input id="myButton" type="button" value="Reveal Now" style="margin: 3px;font-family: 'festivo_lcbasic', Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:26px; text-decoration:none; font-weight:normal; padding-top: 10px;"  onclick="check('myButton')"  onkeypress="check('myButton')"/>

<script type="text/javascript">

var password = ["#123, #345"];

function check(someID) {
    for(a = 0; a < password.length; a++) {
        if (document.getElementById(someID).value == password[a]) {
            top.location.href="enter.html";
        return;
        }
    } 
    location.href="incorrect.html";
}

</script>

Make sense?

Yes, thank you. And, yes, I am aware this is awful code, it is just for something small. I appreciate the quick assistance. — user3776718, Feb 26 '15 at 20:16

Combine onclick and onkeypress

2 Answers2