Как я могу поместить кнопку в состояние "вниз"?

Ответ 1

После того, как некоторые исследования здесь являются окончательным ответом, я получил:

Вы можете запускать события mousedown или mouseup на элемент кнопки с помощью keyup и keydown если ваша кнопка запрограммирована на изменение ее стиля в соответствии с этими событиями, чем вам хорошо.

Смотрите этот пример скрипки: http://jsfiddle.net/FwKEQ/15/

Обратите внимание, что если вы используете компоненты jQuery UI, чем это работает. Но для стандартных кнопок нет способа переместить их в их нажатое состояние, используя 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:

Там может быть хак, который мы могли бы использовать: используя accesskey для элемента кнопки, а затем попробуйте имитировать нажатие клавиши доступа (что я не уверен, если это возможно) вот где я до сих пор http://jsfiddle.net/FwKEQ/28/

ИЗМЕНИТЬ 2: Поэтому, глядя дальше в эту тему, я нашел следующее:

• Кнопки по умолчанию (без стилей) отображаются ОС, я не смог найти для этого формальное доказательство, но если вы попытаетесь загрузить одну и ту же страницу с помощью ОС Mac, вы получите кнопки стиля Mac OS в то время как в окнах вы получите "уродливую" серо-кнопку.

• Поскольку кнопки по умолчанию отображаются ОС, они соответствуют событиям ОС, означающим события, которые отправляются браузером и которым доверяют.

• это не относится к пользовательским стилизованным кнопкам, так как они соответствуют CSS JS, чтобы изменить их внешний вид нажатием, поэтому JQ-кнопка зависит от JS.

поэтому для подведения итогов вам понадобится доверенное событие пресса, чтобы запустить кнопку по умолчанию, чтобы изменить его стиль, и это невозможно сделать из-за ограничений безопасности.

читайте немного о проверенных событиях здесь: http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events

и если кто-то может найти официальную ссылку относительно кнопок по умолчанию, отображаемых ОС, прокомментируйте или отредактируйте этот ответ.

Ответ 2

К сожалению, отображение активного состояния на кнопках по умолчанию не выполняется это простой вопрос о стиле css, и его можно легко изменить, применяя JavaScript.

Опция для этого по умолчанию - использовать горячие клавиши jquery plugin: https://github.com/jeresig/jquery.hotkeys или реализовать альтернативные коды клавиш для разных браузеры.

и применить 50% непрозрачность к кнопке по умолчанию при нажатии (для указания нажатия клавиши).

(Для меня это кажется почти идеальным;-) Он, вероятно, так же хорош, как легко может работать на разных платформах и браузерах с помощью стандартных кнопок.

jsfiddle DEMO

и код...

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

В скрипке я применяю его к кнопке пробела и mousedown/up для достижения такого же эффекта со всеми событиями (но вы можете просто использовать его с ключом "a"... это вопрос вкуса).

Ответ 3

Вот jsfiddel, который показывает, как это делается с помощью jQuery: http://jsfiddle.net/KHhvm/2/

Важная часть:

$("#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();
    }
});

Событие кнопки запускается при вводе "a" в поле ввода. Но, как заметил Марк, вам нужно подделать стиль для нажатой кнопки, потому что браузер этого не делает.

Изменить: Я не уверен, что вы используете jQuery в своем проекте. Я просто хотел показать, что это возможно вообще. Если это можно сделать с помощью библиотеки jQuery, есть также способ сделать это в чистом javascript.;)