CODEWITHSUNDEEP
javascriptjqueryhtmlbutton
Alex F
Alex F

Reputation: 57

Triggering JavaScript function tied to an HTML button by pressing Enter. (Without using Tab key)

My intention is to create a button which can trigger JavaScript funciton (alert "Button works!") tied to it by pressing Enter key. But it works only after using Tab key to highlight the button. I have unsuccessfully tried JavaScript and JQuery solutions. How can I make it work without fiddling around with Tab key? Here is the code:

<html>
  <head>
    <title>Enter Press Test</title>
  </head>
  <body>

  <p style="text-align: center;" >

    <button id="button1" onclick="alert('Button works!');" onkeypress="handle(event)">
     Start Test
    </button>
  </p> 

    <!--<script type="text/javascript"> 
        function handle(e) {            // JavaScript solution
            if (e.keyCode === 13) {
                alert("Button works!");
            }
        }
    </script>-->

    <script type="text/javascript">
        $("#button1").keyup(function(event) {     // JQuery solution 
            if (event.keyCode == 13) {
                $("#button1").click();
            }
        });
    </script> 

    <script type="text/javascript" scr='./scritps/jquery-3.1.1.min.js'></script>

  </body>
</html>

Upvotes: 0

Views: 131

Answers (7)

vasanth
vasanth

Reputation: 13

    <html>
    <head>
    <title>Enter Press Test</title>
    </head>
    <body>
    <p style="text-align: center;" >
    <button id="button1" onclick="alert('Button works!');"onkeypress="handle(event)">
         Start Test
     </button>
     </p>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <script type="text/javascript">
         $("#button1").focus();
               $("#button1").keyup(function(event) {     // JQuery solution 
                   if (event.keyCode == 13) {
                       $("#button1").click();
                   }
               });

   </script> 
   </body>
   </html>

Upvotes: 0

jony89
jony89

Reputation: 5367

if what you wish is as well when the button is not highlighted then its just a Enter key without any connection to the button.

The solution should not even know the button exist .

so you could do something like: 

$(document).keypress(function(e) {
    if (e.which == "13") { 
        alert("this is enter key, but im not aware to the button"); 
    }       
});

Upvotes: 0

Jayesh Agarwal
Jayesh Agarwal

Reputation: 138

if you want to enter/call function without tabbing on button, by just on through enter, please bind function with document keypress event: 

  $(document).keypress(function(e){
            if(e.which == 13){//Enter key pressed
                $("#button1").click();
            }
        });

Upvotes: 0

Samir
Samir

Reputation: 1368

You can use something like this. Bind the events in .on() method. No need to write different events for that. And as i mention include the Jquery before using it.

<html>
  <head>
    <title>Enter Press Test</title>
    <script type="text/javascript" scr='./scritps/jquery-3.1.1.min.js'></script>
  </head>
  <body>

  <p style="text-align: center;" >
    <button id="button1" onclick="alert('Button works!');" onkeypress="handle(event)">
     Start Test
    </button>
  </p> 

    <!--<script type="text/javascript"> 
        function handle(e) {            // JavaScript solution
            if (e.keyCode === 13) {
                alert("Button works!");
            }
        }
    </script>-->

    <script type="text/javascript">
        $(document).on('keyup mouseup', '#button1', function(event) {       // JQuery solution 
            $("#button1").click(); //fire the event, on mouse click
            if (event.keyCode == 13) {  //fire the event on enter key press
                $("#button1").click();
            }
        });
    </script> 
  </body>
</html>

Upvotes: 0

J_Everhart383
J_Everhart383

Reputation: 354

Typically, when you listen for a keypress event, either a button or a text input will have focus, so we will listen for the keypress event on that specific element. Since you only have the button and no input, you could listen for the keypress on the window global object, but that would alert every time the enter key is pressed for the entire page.

For the record, this snippet "works" without using the tab, but I do think you'd be better off adding some other kind of input/s that you could use to catch the keypress event. I could also be missing some context here. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <title>Enter Press Test</title>
  </head>
  <body>

  <p style="text-align: center;" >

    <button id="button1" onclick="alert('Button works!');" onkeypress="handle(event)">
     Start Test
    </button>
  </p> 

    <!--<script type="text/javascript"> 
        function handle(e) {            // JavaScript solution
            if (e.keyCode === 13) {
                alert("Button works!");
            }
        }
    </script>-->

    <script type="text/javascript">
        $(window).keyup(function(event) {     // JQuery solution 
            if (event.keyCode == 13) {
                $("#button1").click();
            }
        });
    </script> 

    <script type="text/javascript" scr='./scritps/jquery-3.1.1.min.js'></script>

  </body>
</html>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337714

You should attach the event handler to the document so that any element can receive the keypress event and have it bubble up the DOM and be caught at the highest point. Also note that you should use unobtrusive event handlers over outdated on* event attributes. Try this:

$(document).keypress(function(e) {
  if (e.keyCode == 13) {
    $("#button1").click();
  }
});

$('#button1').click(function() {
  alert('Button works!');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p style="text-align: center;">
  <button id="button1">
    Start Test
  </button>
</p>

Upvotes: 0

Sgnl
Sgnl

Reputation: 1970

Add your event listener to the document element instead of #button1:

$(document).keyup(function(event) {
  if (event.keyCode == 13) {
    $("#button1").click();
  }
});

$('#button1').click(function(){
   alert('Button works!');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>

<head>
  <title>Enter Press Test</title>
</head>

<body>

  <p style="text-align: center;">

    <button id="button1">
      Start Test
    </button>
  </p>

</body>

</html>

Upvotes: 1

Related Questions