Question

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

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

Answer 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>

修改

我们可能会利用黑客攻击：使用accesskey作为按钮元素，然后尝试模拟按键访问（我不确定是否可能）这是我到目前为止http://jsfiddle.net/FwKEQ/28/
的地方
编辑2： 因此，进一步研究这个主题，我发现了以下内容：

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

由于操作系统会显示默认按钮，因此它们符合操作系统事件，这意味着浏览器发送并受信任的事件。

对于自定义样式按钮不适用，因为它们符合CSS和JS以改变它们在印刷机上的外观，这就是JQ按钮受JS影响的原因。

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

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

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

Answer 2

不幸的是，在默认按钮上也没有呈现活动状态是一个简单的CSS样式问题，也不能通过应用轻松改变的JavaScript。

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

按下时

和将50％不透明度应用于默认按钮（表示keydown）。

（对我而言似乎几乎完美;-)它可能很容易使用默认按钮在平台和浏览器之间工作。

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

Answer 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”时会触发按钮事件。但正如Mark所指出的那样，你需要伪造点击按钮的样式，因为浏览器没有这样做。

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

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

3 个答案: