CODEWITHSUNDEEP
javascripthtml
Swell
Swell

Reputation: 139

Capturing the Enter key to cause a button click with javascript

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

Upvotes: 4

Views: 20153

Answers (4)

Mahaveer
Mahaveer

Reputation: 1

onKeydown

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

Upvotes: 0

Tim Down
Tim Down

Reputation: 324707

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

}

Upvotes: 5

Jacob Relkin
Jacob Relkin

Reputation: 163308

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" />

Upvotes: 7

sa125
sa125

Reputation: 28971

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

Upvotes: 2

Related Questions