javascript - 如何通过按键对按钮激活应用 CSS 效果？

Question

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

(回顾一下:可以通过按 Tab 直到按钮获得焦点，然后按 Space 在浏览器中激活按钮。此外，虽然看起来未正式指定，许多浏览器将 Enter 按键转换为激活 (a) 提交按钮，前提是表单中的输入字段之一具有焦点(不包括多行文本区域，原因很明显). More details in this Stackoverflow answer. )

使用 :active 可以很容易地应用鼠标点击效果。伪类。在 Windows 上使用 Firefox 32、Chrome 41 和 Internet Explorer 11 进行的一些快速测试表明，FF 不应用 :active使用 Space 激活按钮时的伪类(这看起来不规则)，而 Chrome 和 IE 实际上会应用它(这是我所期望的)。通过 Enter 激活按钮时(在 <form> 、 type="submit" 内)应用它。为了在按键上获得一致的效果应用，我被迫走 JavaScript 路线(jQuery $(xx).on() 事件处理程序简化了事情)。

是否有一种非 JavaScript/CSS 方式来处理按键激活时的按钮效果？我的猜测是不，但想听听其他见解/经验...

这里是一些基本代码:(为了简单起见，更复杂的按钮效果被简单的彩色边框代替。颜色根据激活方法而改变，为了更清楚 - 在真实系统中，它们都是一样的风格。)

$(document).ready(function() {
  $("#form").on("keydown", function(ev) {
    if (ev.which == 13) { // enter on form (submit)
      $("#button").addClass("formenter");
    }
  });
  $("#form").on("keyup", function(ev) {
    if (ev.which == 13) { // enter on form (submit)
      $("#button").removeClass("formenter");
    }
  });
  $("#button").on("keydown", function(ev) {
    if (ev.which == 32) { // spacebar while button has focus
      $("#button").addClass("spacebar");
    }
  });
  $("#button").on("keyup", function(ev) {
    if (ev.which == 32) { // spacebar while button has focus
      $("#button").removeClass("spacebar");
    }
  });
});

.mybutton {}
.mybutton:active {
  border: 5px solid red;
}
.mybutton.spacebar {
  border: 5px solid cyan;
}
.mybutton.formenter {
  border: 5px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form id="form" action="javascript:console.log('Clicked!');">
  <button id="button" type="submit" class="mybutton">Go</button>
</form>

Answer 1

请检查这个

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

否则你可以在这里得到相关的类似例子:

Change event not firing when radio button is selected with keyboard