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

Suppose I have a button, which goes into a down state when someone clicks on it, but before the mouse is released.

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

Now suppose instead that someone presses the 'a' key, I want the button to go into the down state, until the key is released, at which point it is triggered. Is this possible?

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

3 个解决方案

#1

After dooing some research here is the final answer I got:

在做了一些研究后,我得到的最终答案是:

You can trigger mousedown or mouseup events on a button element using keyup and keydown if your button is programmed to change its style according to these events than you are good to go.

如果你的按钮被编程为根据这些事件改变它的风格,你可以使用keyup和keydown触发按钮元素上的mousedown或mouseup事件。

See this fiddle example: http://jsfiddle.net/FwKEQ/15/

看到这个小提琴示例:http://jsfiddle.net/FwKEQ/15/

Note that if you use jQuery's UI components than it does work. But for standard buttons there is no way that you can move them to their pressed state using javascript

请注意,如果您使用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:

There might be a hack that we could utilize: using accesskey for the button element and then try to simulate the accesskey press (that i am not sure if possible) here is where i'm at so far http://jsfiddle.net/FwKEQ/28/

可能有一个我们可以利用的黑客攻击:使用按钮元素的accesskey然后尝试模拟accesskey按下(我不确定是否可能)这里是我到目前为止的地方http://jsfiddle.net/ FwKEQ / 28 /

EDIT 2: So looking further into this topic i have found the following:

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

Default buttons (without styles) are rendered by the OS, I was not able to find a formal proof for that but if you try to load the same page using a mac OS you'll get mac OS style buttons while in windows you will get the "ugly" gray button.

默认按钮(没有样式)由操作系统呈现,我无法找到正式的证明,但如果你尝试使用mac OS加载相同的页面,你将获得mac OS风格的按钮,而在Windows中你将获得“丑陋”的灰色按钮。
Because the default buttons are rendered by the OS they comply to OS events meaning events that are sent by the browser and are trusted.

由于默认按钮由操作系统呈现,因此它们符合操作系统事件,这意味着由浏览器发送并受信任的事件。
this is not true for custom styled buttons as they comply to CSS an JS to change their appearance on press that is why the JQ button is affected by JS.

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

so to summarize you would need a trusted press event to fire on a default button to change its style and that cannot be done due to security constraints.

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

read a bit more about trusted events here: http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events

在这里阅读更多关于可信事件的信息:http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events

and if someone could find a formal reference with regards to the default buttons being rendered by the OS please comment or edit this answer.

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

#2

Unfortunately the rendering of the active state on default buttons neither is a simple matter of css styling nor can be easily changed by applying javascript.

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

An option to do this on default buttons is to use the hotkeys jquery plugin: https://github.com/jeresig/jquery.hotkeys or implement alternative key codes for different browsers.

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

and to apply 50% opacity to the default button when pressed (to indicate the keydown).

并在按下时将50%不透明度应用于默认按钮(以指示keydown)。

(To me it seems almost perfect ;-) It probably is as good as it can easily get to work across platforms and browsers using default buttons.

(对我来说,它似乎几乎完美;-)它可能很容易使用默认按钮跨平台和浏览器工作。

jsfiddle DEMO

and the code ...

和代码......

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

In the fiddle I apply it to the space button and the mousedown/up to achieve the same effect with all events (but you could just use it with the 'a' key ... this is a matter of taste).

在小提琴中,我将它应用于空格按钮和mousedown / up以实现与所有事件相同的效果(但你可以将它与'a'键一起使用......这是品味的问题)。

#3

Here is a jsfiddel that shows how it's done using jQuery: http://jsfiddle.net/KHhvm/2/

这是一个jsfiddel,展示了如何使用jQuery:http://jsfiddle.net/KHhvm/2/

The important part:

重要的部分:

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

The button event is triggered when entering "a" in the input field. But as Mark pointed out you need to fake the styling for the clicked button because the browser doesn't do it.

在输入字段中输入“a”时会触发按钮事件。但正如Mark所指出的那样,你需要伪造点击按钮的样式,因为浏览器没有这样做。

Edit: I'm not sure if you're using jQuery in your project. I just wanted to show that it is possible at all. If it can be done with the jQuery library there is also a way to do it in pure javascript. ;)

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

#1