Question

我有一个按钮，按下时会更改div的html内容。我还有一个jQuery函数，当按下键盘时会触发该按钮的点击＆＃39; A＆＃39;键。

该功能部分工作正如我所期待的那样。当我按下A＆＃39; div的内容会发生变化，但按钮的样式不会改变为按钮：活动样式（直接单击按钮时一切正常）。

我希望按键效果与单击按钮本身完全相同，包括样式更改。

HTML 的

<button type="button">Click Me</button>
<div id="button-state">not clicked</div>

CSS

button {
    width: 50px;
    height: 50px;
    border-radius: 5px;
}

button:active {
    border-color: red;
    color: red;
}

js（jQuery）

$(":button").click(function() {
  $("#button-state").html("button was clicked");
});

//trigger click when pressing 'A' 
$(document).keypress(function(e) {
  if(e.which == 97) {
    $(":button").trigger('click');
  }
});

小提琴here（请务必点击结果＆＃39;窗口以测试按键）。

Answer 1

在mousedown事件触发后以及实际点击事件发生之前，将应用button:active样式。您可以通过添加类并在一段时间后删除它来模仿相同的行为：

$(document).keypress(function(e) {
  if(e.which == 97) {
    $(":button").trigger('click');
    $("button").addClass('active');
    setTimeout(function() {
      $("button").removeClass('active');
    }, 90);
  }
});

http://jsfiddle.net/xh8qsbu5/

如何切换按钮：在触发该按钮上的单击事件时处于活动状态？

1 个答案: