Javascript 如何将按钮置于关闭状态？

假设我有一个按钮，当有人点击它时，它会进入关闭状态，但在释放鼠标之前

---

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

下面是一个JSFIDEL，它展示了如何使用jQuery完成此操作：

重要的部分是：

$("#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来完成

在做了一些研究之后，我得到了最后的答案：

您可以使用

keyup

和

keydown

在按钮元素上触发

mousedown

或

mouseup

事件 如果您的按钮被编程为根据这些事件改变其样式，那么您就可以开始了

请参见此小提琴示例：

请注意，如果您使用jQuery的UI组件，那么它将无法正常工作。但对于标准按钮，您无法使用javascript将其移动到按下状态

html:

按“A”将我移动到按下状态

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>

$（“#jQbutton”）.button（）；
$（文档）.keydown（函数（事件）{
如果（（event.keyCode==97）| |（event.keyCode==65））
$（“#jQbutton”）.mousedown（）；
});
$（文档）.keyup（函数（事件）{
如果（（event.keyCode==97）| |（event.keyCode==65））
$（“#jQbutton”）.mouseup（）；
});

编辑：

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

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

我们可能会利用一个黑客： 对按钮元素使用

accesskey

，然后尝试模拟accesskey按下（我不确定是否可能） 这就是我目前所处的位置

编辑2: 因此，深入研究这一主题，我发现以下几点：

默认按钮（没有样式）是由操作系统呈现的，我无法找到正式的证据，但是如果你尝试使用mac OS加载同一页面，你会得到mac OS样式的按钮，而在windows中，你会得到“丑陋”的灰色按钮

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

对于自定义样式的按钮来说，这是不正确的，因为它们遵循CSS和JS来更改其在按下时的外观，这就是JQ按钮受JS影响的原因

因此，总而言之，您需要一个trusted press事件在默认按钮上触发，以更改其样式，但由于安全限制，这无法完成

请在此处阅读有关受信任事件的更多信息：

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

不幸的是，在默认按钮上呈现活动状态 这是一个简单的css样式问题，也不容易通过应用 javascript

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

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

（对我来说，它似乎近乎完美；-）它可能很好，因为它可以使用默认按钮轻松地跨平台和浏览器工作

而代码

html:

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

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

---

在小提琴中，我将其应用于空格键和鼠标向下/向上，以实现与所有事件相同的效果（但您可以使用“a”键…这是一个品味问题）。

有趣…不确定这是否可行；可能需要使用图像或样式来伪造。添加一个KeyListener。按下某个键时，将其添加到当前按下的键的数组中。释放后，将其从阵列中移除。使用该数组检查按下了哪些键。@Casebash，要清除。。。你的意思是你想要一个可视的按钮，当你按下“a”时，它看起来像被按下了，然后当你释放“a”时，它看起来像被释放了，然后触发按钮想要做的任何事情吗？@archil使用自定义css这当然是孩子们玩的；-）相关：+1；这个问题的最佳解决方案。不管怎样，这里有一个稍微优化的代码版本，它是否能在FF和Chrome中正常工作。当我按下默认按钮时，默认按钮不会发生任何变化。但是jQuery UI按钮正在改变样式。@kiranvj这不适用于仅适用于jQuery的默认按钮。。这就是答案。。目前还没有选项来模拟默认按钮的按下状态，因为它们是由操作系统呈现的，而不是由浏览器呈现的，但我正试图找到一种可以利用accesskey并模拟require按键的方法。当我在输入字段中键入“a”时，按钮会“向下”，它没有返回是的，我只是添加了他鼠标下降事件，因为这是你要求的您也可以轻松地添加.mouseup（）事件。+1这是一个巧妙的技巧。。这不是一个真正的“按下按钮”风格，但它仍然提供了所需的UI反馈。谢谢。是的-由于不一致的按钮向下重新编码，不可能实现更好的cros平台效果。不透明度0.5通常是按钮上的默认“禁用”效果，但我一直在使用它来模拟按钮而不是复选框或收音机时的按下状态：我认为它几乎与我们可以得到的一样好。而不是降低不透明度并使默认按钮变亮，您还可以使用

filter:brightnes（75%）

或类似的方法将按钮变暗[我认为可能需要供应商前缀（如-moz-和-webkit-）]