How to trigger input type button by pressing Enter key

Question

In JSF 1.2 and I'm using h:commandButton type="button" but the button does not trigger when I tab on it and press enter. I tried using onkeypress="keyEnter(event)"

     function keyEnter(eve){
         if (eve.keyCode == 13) {
              document.getElementById(eve.target.id).click();
          }
          return false;
      }

and it triggers the button when enter key is pressed. Now here is my question, I have many h:commandButton elements with type button, what can I do in order to implement keyEnter(eve) to all the elements of type button?

Thanks in advance.

Answer 1

Try this

FULL CODE

function keyEnter(eve){
    var key = eve.keyCode || eve.which;
     if (key == 13) {
         document.getElementById(eve.target.id).click();
     }
      return false;
};

To bind all You can do this

$('input[type="button"]').on("keyenter",function(eve){
     var key = eve.keyCode || eve.which;
     if (key == 13) {
          $(this).click();
      }
      return false;        
});

Answer 2

To bind the listeners use on

$(document).on("keyup","button", function(eve){
      if (eve.keyCode == 13) {
          $("#" + eve.target.id).trigger("click");
      }
      return false;        
});

ALSO,

using jQuery you can use the trigger() function:

$("#" + eve.target.id).trigger("click")

or by using .click() (which is a shortcut for the above) like so:

$("#" + eve.target.id).click()

Answer 3

You can use on() to bind a keyenter event handler to all buttons in the document:

$(document).on("keyenter","button", function(eve){
      if (eve.keyCode == 13) {
          document.getElementById(eve.target.id).click();
      }
      return false;        
});

Adjust accordingly.

Answer 4

To implement your event to all buttons element, you can do like this :

$('button').each(function(){
     $(this).keypress(function(){
         if (eve.keyCode == 13) {
             $(this).click(); 
          }
          return false;
      }
});