Question

I have this CSS3 enter button
here:

If you click it, it seems like it’s pressed. I want to achieve the same effect (probably using jQuery), by pressing the enter key physically on my keyboard.

I did something like this: (sorry if it’s completely wrong, I don’t do jQuery at all)

<script type="text/javascript">
   $(document).ready(function(){
     $("enter").keypress(function(event){
       if(event.keyCode == 13){
         $(this).toggleClass(".button-clicked");
       }
     });
   });
</script>

The CSS selector for the unpressed button is:
.button and .button.orange {}

The CSS selector for the pressed button is:
.button:active, .button-clicked {}

Thanks for your help!

Answer 1

I haven’t tested this, but I think you should be able to do something like

I have just tested this (and linked to a demo, below the jQuery), and it works pretty well:

$('body').keydown(
    function(e){
        if (e.which == 13) { // enter
            $('buttonSelector').addClass('button-clicked');
        }
    }).keyup(
    function(e){
        if (e.which == 13) { // enter
            $('buttonSelector').removeClass('button-clicked');
        }
    });

JS Fiddle demo.

With this the keydown causes the button to appear pressed so long as the enter key is pressed, and, on release, triggers the keyup() handler, changing the style of the button so as to appear un-clicked.

Refined the above, somewhat, using on(), though having to use an if/else if statement to check the function type:

$('body').on('keydown keyup', function(e) {
    if (e.type == 'keydown') {
        if (e.which == 13) { // enter
            $('#button').addClass('button-clicked');
        }
    }
    else if (e.type == 'keyup') {
        if (e.which == 13) { // enter
            $('#button').removeClass('button-clicked');
        }
    }
});

JS Fiddle demo.

References:

• keydown().
• keyup().
• addClass().
• removeClass().
• on().