How can I put a button in the down state?

Question

Suppose I have a button, which goes into a down state when someone clicks on it, but before the mouse is released.

Now suppose instead that someone presses the 'a' key, I want the button to go into the down state, until the key is released, at which point it is triggered. Is this possible?

Answer 1

After dooing some research here is the final answer I got:

You can trigger mousedown or mouseup events on a button element using keyup and keydown if your button is programmed to change its style according to these events than you are good to go.

See this fiddle example: http://jsfiddle.net/FwKEQ/15/

Note that if you use jQuery's UI components than it does work. But for standard buttons there is no way that you can move them to their pressed state using javascript

html:

<button id="jQbutton">Press 'A' to move me to pressed state</button>

Javascript:

<script>
    $( "#jQbutton" ).button();

    $(document).keydown(function(event) {
        if ((event.keyCode === 97)||(event.keyCode === 65))
            $("#jQbutton").mousedown();
    });

    $(document).keyup(function(event) {
        if ((event.keyCode === 97)||(event.keyCode === 65))
            $("#jQbutton").mouseup();
    });
</script>

EDIT:

There might be a hack that we could utilize: using accesskey for the button element and then try to simulate the accesskey press (that i am not sure if possible) here is where i'm at so far http://jsfiddle.net/FwKEQ/28/

EDIT 2: So looking further into this topic i have found the following:

1. Default buttons (without styles) are rendered by the OS, I was not able to find a formal proof for that but if you try to load the same page using a mac OS you'll get mac OS style buttons while in windows you will get the "ugly" gray button.

2. Because the default buttons are rendered by the OS they comply to OS events meaning events that are sent by the browser and are trusted.

3. this is not true for custom styled buttons as they comply to CSS an JS to change their appearance on press that is why the JQ button is affected by JS.

so to summarize you would need a trusted press event to fire on a default button to change its style and that cannot be done due to security constraints.

read a bit more about trusted events here: http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events

and if someone could find a formal reference with regards to the default buttons being rendered by the OS please comment or edit this answer.

Answer 2

Unfortunately the rendering of the active state on default buttons neither is a simple matter of css styling nor can be easily changed by applying javascript.

An option to do this on default buttons is to use the hotkeys jquery plugin: https://github.com/jeresig/jquery.hotkeys or implement alternative key codes for different browsers.

and to apply 50% opacity to the default button when pressed (to indicate the keydown).

(To me it seems almost perfect ;-) It probably is as good as it can easily get to work across platforms and browsers using default buttons.

jsfiddle DEMO

and the code ...

html:

<button id="test">Test Button</button>
Selected: <span class="selected" id="out"></span>

javascript:

$('#test').click(function () {
    fn_up();
});
fn_down = function(event){
    $('#test').css("opacity", 0.5);
    $('#test').focus();
    event.preventDefault();
}
fn_up = function(event){
    $('#test').css("opacity", 1);
    $('#out').append(" test");
    event.preventDefault();
}

//to bind the event to the 'a' key
$(document).bind('keydown','a', fn_down); 
$(document).bind('keyup','a', fn_up);

//to get the same effect with the 'space' key
$(document).bind('keydown','space', fn);
$(document).bind('keyup','space', fn2);

In the fiddle I apply it to the space button and the mousedown/up to achieve the same effect with all events (but you could just use it with the 'a' key ... this is a matter of taste).