通过按Enter的jQuery函数

Question

I'm struggle with making this work and understand how I can call specific button by pressing Enter in Javascript.

As Example I have

 $(document).ready(function () { $('#myText').keyup(function () { alert(e.keyCode); }); $('#myButton').button().click(function () { alert('Button click 1!'); }); $('#myButton2').button().click(function () { alert('Button click 2!'); }); }); 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <form action="#"> <button id="myButton">Button</button> <button id="myButton2">Button2</button> <input type="text" id="myText" /> </form> 

How to make that when I hit enter in the Mytext value It's click on myButton2 ?

DEMO: http://jsfiddle.net/WZ6TM/610/

UPDATE:

The following answers not working as expected, please see my code structure:

$(document).ready(function () {

    $('input#manualuser').keyup(function(e) {
        if (e.keyCode === 13) $('#search').click();
      });


    $('#search').click(function search() {
        if ($("input#manualuser").val() === '') {

            $('#infostatus').html("<label id='infostatus' class='info'>Please Enter Username</label>");

        }
        else {
            $.ajax({
                url: "https://" + $seldom + ":443/api/example/" + $("input#manualuser").val(),
                type: "GET",
                dataType: 'Jsonp',
                success: function (result) {....

Answer 1

Problem is being that the default action of pressing Enter key (keydown event) is 'activate' the focused item (actually button1). You need to prevent defaults. And then customize your events as follow.

Here the snippet

http://jsfiddle.net/WZ6TM/637/

$(document).ready(function () { 

$('#myText').keydown (function(e) {
 if(e.which == 13) {  
e.preventDefault();
}
});

$('#myText').keyup(function (e) {
e.preventDefault();

  if(e.which == 13) {   
$("#myButton2").trigger('click');

}

});

$('#myButton').button().click(function () {
   alert('Button click 1!');
});

$('#myButton2').button().click(function () {
   alert('Button click 2!');
});
});

In the example if you close the dialog with Enter, event is launched again so take care and dont think that is doing a loop or something. It is actually working and I hope you understand what is happening.

Cheers

Answer 2

you need to catch the form submit

$('form').submit(function(e){
  e.preventDefault();
  $('#mybutton2').click()
})

Alternatively, you could catch $('body').keyup() and do things with that.

Answer 3

I see two possibilities. The simplest would be to hook off of the submit event:

$(document).ready(function () { 
  $('form').submit(function (e) {
   e.preventDefault();
   $('#myButton2').click();
  });

  $('#myButton').click(function () {
   alert('Button click 1!');
  });

  $('#myButton2').click(function () {
   alert('Button click 2!');
  });
});

And change the mark-up so that the buttons will not submit by default:

<form action="#">
<button type="button" id="myButton">Button</button>
<button type="button" id="myButton2">Button2</button>
<input type="text" id="myText" />
</form>

The other way is to use keydown and listen for the enter key. I wouldn't suggest using this way, though, as listening for specific key codes can make your code harder to reason about.

http://jsfiddle.net/WZ6TM/644/ Edit: Fiddle provided