假设我有一个按钮,当有人点击它时,但在释放鼠标之前它会进入关闭状态。
现在假设有人按下'a'键,我希望按钮进入关闭状态,直到释放键,此时它被触发。这可能吗?
答案 0 :(得分:13)
在做了一些研究后,这是我得到的最终答案:
您可以使用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
如果有人能找到关于操作系统呈现的默认按钮的正式参考,请评论或编辑此答案。
答案 1 :(得分:8)
不幸的是,在默认按钮上也没有呈现活动状态 是一个简单的CSS样式问题,也不能通过应用轻松改变 的JavaScript。
在默认按钮上执行此操作的选项是使用热键jquery插件:https://github.com/jeresig/jquery.hotkeys或为不同的浏览器实现替代密钥代码。
按下时和将50%不透明度应用于默认按钮(表示keydown)。
(对我而言似乎几乎完美;-)它可能很容易使用默认按钮在平台和浏览器之间工作。
和代码......
<强> 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'键一起使用......这是品味的问题)。
答案 2 :(得分: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中完成。 ;)