Javascript 如何通过按键将CSS效果应用于按钮激活？

我有一个CSS样式，可以在单击按钮时更改（在页面上）按钮的外观。当通过键盘激活按钮时，我想对其应用相同的效果

（重述一下：在浏览器中，可以通过按Tab键直到按钮具有焦点，然后按空格键来激活按钮。此外，尽管似乎没有正式指定，但许多浏览器将Enter键转换为激活（a）submit按钮，前提是表单中的一个输入字段具有焦点（出于明显原因，不包括多行文字区域。）

使用

：active

伪类应用鼠标点击效果非常简单。在Windows上使用Firefox 32、Chrome 41和Internet Explorer 11进行的一些快速测试表明，FF在使用空格激活按钮时没有应用

：active

伪类（看起来不规则，而Chrome和IE实际上应用了它（这是我所期望的）。当通过Enter激活按钮（在

，
type=“submit”
）时，没有人应用它。为了在按键上获得一致的效果，我被迫使用JavaScript路径（jQuery
$（xx）。on（）
事件处理程序简化了事情）

有没有一种非JavaScript/CSS唯一的方法来处理按键激活时的按钮效果？我想没有，但我想听听其他见解/经验

下面是一些基本代码：（为了简单起见，更复杂的按钮效果被一个简单的彩色边框所取代。颜色根据激活方法而改变，为了更清晰——在真实的系统中，它们都是相同的样式。）


$（文档）.ready（函数（）{
$（“#形式”）。在（“键控”，功能（ev）{
如果（ev.which==13）{//填写表格（提交）
$（“#按钮”）.addClass（“formenter”）；
}
});
$（“#形式”）。关于（“键控”，功能（ev）{
如果（ev.which==13）{//填写表格（提交）
$（“#按钮”）.removeClass（“formenter”）；
}
});
$（“#按钮”）。打开（“向下键”，功能（ev）{
如果（ev.which==32）{//当按钮有焦点时空格键
$（“#按钮”）.addClass（“空格键”）；
}
});
$（“#按钮”）。打开（“按键”，功能（ev）{
如果（ev.which==32）{//当按钮有焦点时空格键
$（“#按钮”）.removeClass（“空格键”）；
}
});
})；
.mybutton{}
.mybutton:活动{
边框：5px纯红；
}
.mybutton.spacebar{
边框：5px固体青色；
}
.mybutton.formenter{
边框：5px纯绿色；
}

去
请检查此项
其他方面，您可以在此处获得类似的示例：


$("#button").bind('change keypress', function(e){
  // your code
});