javascript - How can I put a button in the down state? - Stack Overflow

admin管理员组

文章数量:1196809

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?

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?

• javascript
• html

Share Improve this question Follow edited Apr 19, 2013 at 11:19 Casebash asked Mar 19, 2013 at 4:22 CasebashCasebash 119k9292 gold badges252252 silver badges353353 bronze badges 13

• 1 Interesting...not sure if this is possible; might have to use images or styling to fake it. – mpen Commented Mar 19, 2013 at 4:24
• Add a KeyListener. When a key is pressed, add it to an array of the currently pressed keys. When it's released, remove it from the array. Use that array to check which keys are pressed. – Zach Latta Commented Mar 19, 2013 at 4:25
• @Casebash, to be clear... ...do you mean that you want a visible button which looks like it's pressed, when you push "a", and then looks like it's released when you release "a", and then triggers whatever the button was meant to do? – LetterEh Commented Mar 19, 2013 at 4:25
• 2 @archil with custom css this is of course kids play ;-) – Ja͢ck Commented Apr 19, 2013 at 6:31
• 1 Related: Any way to keep an html button pressed? – Antony Commented Apr 19, 2013 at 15:00

 |  Show 8 more comments

3 Answers 3

Sorted by: Reset to default 13 +100

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.

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).

Here is a jsfiddel that shows how it's done using jQuery: http://jsfiddle.net/KHhvm/2/

The important part:

$("#textInput").keydown(function(event) {
    var charCodeFor_a = 65;
    if ( event.which == charCodeFor_a ) {

        // "click" on the button
        $('#button').mousedown();
        // make the button look "clicked"
        $('#button').addClass('fakeButtonDown');

        // do some stuff here...

        // release the button later using $('#button').mousedown();
    }
});

The button event is triggered when entering "a" in the input field. But as Mark pointed out you need to fake the styling for the clicked button because the browser doesn't do it.

Edit: I'm not sure if you're using jQuery in your project. I just wanted to show that it is possible at all. If it can be done with the jQuery library there is also a way to do it in pure javascript. ;)

本文标签： javascriptHow can I put a button in the down stateStack Overflow