我该如何将按钮置于按下状态？

Question

我该如何将按钮置于按下状态？

javascripthtml

14

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

现在假设某人按下 'a' 键，我希望按钮处于向下状态，直到释放该键为止，然后触发该按钮。这种情况可能吗？

- Casebash

1

有趣...不确定是否可能；可能需要使用图像或样式来伪造它。 - mpen

@Casebash，明确一下...你的意思是你想要一个可见的按钮，当你按下“a”时它看起来像被按下了，然后当你释放“a”时它看起来像被释放了，然后触发按钮原本应该执行的操作？ - Norguard

相关链接: http://stackoverflow.com/q/12584830/1563422 - Danny Beckett

2

@archil 使用自定义 CSS 当然是小菜一碟的事情；-) - Ja͢ck

1

相关：有没有办法让HTML按钮保持按下状态？ - Antony

显示剩余8条评论

3个回答

8

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

对于默认按钮来说，一种解决方法是使用hotkeys 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);

在这个fiddle里，我将它应用于空格键和鼠标按下/松开事件中，以使所有事件具有相同的效果（但您也可以使用'a'键...这只是品味问题）。

- Martin Turjak

2

+1 这是一个很棒的技巧。虽然它不是真正的“扣钮式”样式，但仍然提供了所需的用户界面反馈。 - Mortalus

1

谢谢。是的 - 由于不一致的按钮渲染，很难实现更好的跨平台效果。0.5的不透明度通常实际上是按钮上默认的“禁用”效果，但我一直在使用它来模拟在使用按钮而不是复选框或单选按钮时的按下状态：http://jsfiddle.net/DDgnU/，我认为这几乎是我们能得到的最好的效果了。 - Martin Turjak

1

不要降低透明度并使默认按钮变浅，您也可以使用 filter: brightness(75%) 或类似的方式将按钮变暗 [我认为可能需要供应商前缀（如 -moz- 和 -webkit-）]。 - Martin Turjak

2

这是一个使用jQuery实现的jsfiddle示例，展示了如何完成这个操作：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中实现。 ;)

- Friederike

当我在输入框中键入“a”时，按钮会“按下”，但它不会返回。 - Voitcus

是的，我只添加了mousedown事件，因为那是你要求的。;) 你也可以很容易地添加mouseup()事件。 - Friederike

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mortalus · Accepted Answer

经过一些研究，这是我得到的最终答案：

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

请参见此 jsfiddle 示例：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

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