14

假设我有一个按钮，当有人单击它时，但在释放鼠标之前，它会进入向下状态。

现在假设有人按下“a”键，我希望按钮进入向下状态，直到释放该键，此时它被触发。这可能吗？

4

3 回答 3

13

在这里做一些研究后，我得到的最终答案是：

您可以使用按钮元素触发mousedown或事件， 如果您的按钮被编程为根据这些事件更改其样式，那么您就可以使用了。mouseupkeyupkeydown

请参阅此小提琴示例：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>

编辑：

可能有一个我们可以利用的技巧：使用accesskey按钮元素，然后尝试模拟 accesskey 按下（我不确定是否可能）这是我目前所处的位置http://jsfiddle.net/FwKEQ /28/

编辑2： 所以进一步研究这个话题我发现了以下内容：

  1. 默认按钮（无样式）由操作系统呈现，我无法找到正式的证明，但如果您尝试使用 mac OS 加载同一页面，您将获得 mac OS 样式按钮，而在 Windows 中您将获得“丑陋”的灰色按钮。

  2. 因为默认按钮是由操作系统呈现的，所以它们符合操作系统事件，这意味着由浏览器发送并受信任的事件。

  3. 这不适用于自定义样式按钮，因为它们符合 CSS 和 JS 以更改其在按下时的外观，这就是 JQ 按钮受 JS 影响的原因。

所以总而言之，您需要一个受信任的按下事件来触发默认按钮以更改其样式，并且由于安全限制而无法完成。

在此处阅读有关受信任事件的更多信息：http: //www.w3.org/TR/DOM-Level-3-Events/#trusted-events

如果有人可以找到有关操作系统呈现的默认按钮的正式参考，请评论或编辑此答案。

于 2013-04-19T07:02:38.983 回答
8

不幸的是，在默认按钮上呈现活动状态既不是简单的 css 样式问题，也不能通过应用 javascript 轻松更改。

在默认按钮上执行此操作的一个选项是使用热键 jquery 插件：https ://github.com/jeresig/jquery.hotkeys或为不同的浏览器实现替代键代码。

并在按下时对默认按钮应用 50% 的不透明度（以指示按下键）。

（对我来说，这似乎几乎是完美的 ;-) 它可能与使用默认按钮轻松跨平台和浏览器工作一样好。

jsfiddle 演示

和代码...

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' 键一起使用......这是一个口味问题）。

于 2013-04-19T14:27:35.937 回答
2

这是一个 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”时触发按钮事件。但是正如 Mark 指出的那样，您需要伪造单击按钮的样式，因为浏览器不会这样做。

编辑：我不确定您是否在项目中使用 jQuery。我只是想证明这是可能的。如果它可以用 jQuery 库来完成，那么还有一种方法可以用纯 JavaScript 来完成。;)

于 2013-04-19T06:59:31.230 回答