Capturing the Enter key to cause a button click with javascript

Question

i want to Capturing the Enter key to cause a button click

i have this javascript:

    function doClick(buttonName,e)
    {
        //the purpose of this function is to allow the enter key to 
        //point to the correct button to click.
        var key;

         if(window.event)
              key = window.event.keyCode;     //IE
         else
              key = e.which;     //firefox

        if (key == 13)
        {
            //Get the button the user wants to have clicked
            var btn = document.getElementById('submit');
            if (btn != null)
            { //If we find the button click it
                btn.click();
                event.keyCode = 0
            }
        }
   }

with html

<input type="button" id="submit" value="Search" onClick="doSomeThing();" />
<input type="text" name="search" onKeyPress="doClick('submit',event)" />

this is work fine with IE browser but it didn't with Firefox,

Why ? can anybody fix this javascript code to work on all browsers.

thank you

Could you elaborate on what is happening? Is the method being called at all? — cwallenpoole, Dec 05 '10 at 12:11
this link will help you definatly http://stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the-enter-key-in-a-text-box — , Aug 16 '12 at 07:02

Jacob Relkin · Answer 1 · 2010-12-05T10:15:22.970

7

You should really not use inline event handlers:

window.onload = function() {
   document.getElementById('submit').onclick = doSomething;
   document.getElementById('search').onkeypress = function(e) {
       doClick('submit', e);
   };
};

function doClick(buttonName,e)
{
  //the purpose of this function is to allow the enter key to 
  //point to the correct button to click.
  var ev = e || window.event;
  var key = ev.keyCode;

  if (key == 13)
  {
     //Get the button the user wants to have clicked
     var btn = document.getElementById(buttonName);
     if (btn != null)
     { 
        //If we find the button click it
        btn.click();
        ev.preventDefault(); 
     }
  }
}

Your HTML should then look like this:

<input type="button" id="submit" value="Search"/>
<input type="text" name="search" id="search" />

edited Dec 05 '10 at 10:15

answered Dec 05 '10 at 06:19

Jacob Relkin

161,348
33
346
320

2

The fact the OP is using event handler attributes is irrelevant to the question, and asserting that the OP shouldn't do so is dogmatic. It's perfectly valid to use event handler attributes and introduces no functional problems. – Tim Down Dec 05 '10 at 11:49
didn't work! i made alert box function for testing purposes. document.getElementById('submit').onclick = getMsg(); but the alert box appears immediately when I open the page and when i click enter on IE but didn't work with Firefox also! – Swell Dec 05 '10 at 13:28
@Swell you need to assign the function reference, not the invocation return value: document.getElementById('submit').on click = getMsg; – Jacob Relkin Dec 05 '10 at 15:17
yes this is work fine with Firefox but not with IE, I edited to work on IE, so can you edit your solution put this if(window.event) event.keyCode = 0 else ev.preventDefault(); Instead of just ev.preventDefault(); i want to set your solution as a correct one but can you please edit it first. – Swell Dec 05 '10 at 16:32

Tim Down · Answer 2 · 2010-12-06T09:40:32.693

5

I'd suggest using the keydown event instead for this particular case, since it simplifies key detection: you can use keyCode in all browsers. Also, you're passing in the ID of the button you want to click but then not using it, so I've changed that. Also, I've added a return false to prevent the default behaviour of pressing the enter key, (although this part won't have any effect in Opera: you'll need to suppress the keypress event instead in that browser):

function doClick(buttonId, e)
    {
    if (e.keyCode == 13)
        {
        // Get the button the user wants to have clicked
        var btn = document.getElementById(buttonId);
        if (btn)
        {
            btn.click();
            return false;
        }
    }

}

edited Dec 06 '10 at 09:40

answered Dec 05 '10 at 11:55

Tim Down

318,141
75
454
536

Down but not up? I've always found release to have a more intuitive feel. Is this just your preference or is there an actual performance boost? (are some browsers better/faster with down than up?) – cwallenpoole Dec 05 '10 at 12:13
@cwallenpoole: The reason I went with `keydown` was to keep the same user experience as in the question: the OP was using `keypress`, which fires immediately after `keydown`. Also, it agrees with the native browser behaviour of submitting a form when the user presses the Enter key, which is triggered when the key is pressed rather than when it's released. – Tim Down Dec 05 '10 at 15:21
I forgot about the .click() method and that forms submit on enter down not enter up. Thanks, this really helped me out of a headache for the last hour. – pqsk Sep 12 '13 at 17:25

score 2 · Answer 3 · answered Dec 05 '10 at 06:36

Why not use a wrapper js framework like jQuery? It does all the cross-browser stuff for you. Just off the top of my head, this could work (still, you should probably verify):

jQuery(function(){
  jQuery(window).keyup( function(e){ 
    if (e.keyCode == 13) {
      // handle click logic here
    }
  });
});

score 0 · Answer 4 · edited Oct 05 '14 at 11:57

0

onKeydown

if (event.keyCode == 13) {
    document.getElementById('submit').click(); 
    return false;
}

edited Oct 05 '14 at 11:57

Luís Cruz

14,780
16
68
100

answered Oct 05 '14 at 11:16

Mahaveer

1

Capturing the Enter key to cause a button click with javascript

4 Answers4

Linked