Question

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

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

使用:active伪类对鼠标点击应用效果非常简单。在Windows上使用Firefox 32，Chrome 41和Internet Explorer 11进行的一些快速测试表明，当使用 Space 激活按钮时，FF 不应用:active伪类（似乎不正常），而Chrome和IE确实应用它（这是我所期望的）。通过 Enter 激活按钮（在<form>，type="submit"内）时无应用。为了在按键上获得效果的一致应用，我被迫使用JavaScript路由（jQuery $(xx).on()事件处理程序简化了事情。）

是否有非JavaScript / CSS专用方式来处理按键激活时的按钮效果？我猜是没有，但想听听其他见解/经历......

以下是一些基本代码:(为简单起见，更复杂的按钮效果被简单的彩色边框取代。颜色根据激活方法而改变，为了更加清晰 - 在实际系统中，它们都将是相同的风格。）

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

请检查

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

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

Change event not firing when radio button is selected with keyboard

如何通过按键在按钮激活上应用CSS效果？

1 个答案:

请检查