添加“按下按钮”对 JQuery 的 keydown 有影响吗？

Question

当选择按钮并按下某个键时，如何添加“按钮按下”效果？实际媒体的行为是有效的，只是没有显示出任何效果。

更具体地说： 我有一组可以使用左右箭头键遍历的按钮。当按下 Enter 时，当前选定的按钮将执行其 onclick 行为。

谢谢！

Answer 1

这是一个小提琴示例： http://jsfiddle.net/maniator/DBLem/

var index = 0;
var buttons = $('button');
var max = buttons.length - 1;
var buttonOn = buttons.eq(index).addClass('on');

$(document).keydown(function(e) {
    switch (e.keyCode) {
    case 39:
        {
            index++;
            if (index > max) {
                index = 0;
            }
            break;
        }
    case 37:
        {
            index--;
            if (index < 0) {
                index = max;
            }
            break;
        }
    case 13:
        {
            buttonOn.trigger('click');
        }
    }
    buttonOn = buttons.eq(index);
    buttons.removeClass('on');
    buttonOn.addClass('on');
});


$('button').click(function(){
    alert(this.innerHTML);
});

Answer 2

好吧，我会保存当前具有焦点的元素的 id，如下所示，然后在用户按 Enter 键时单击它：

var id; 

$("button").focus(function () {
     id = this.id;
});

$(window).keydown(function(e){
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code === 13){
        $('#'+id).click();
    }
});

Answer 3

试试这个

$("button").click(function(){

      $(this).animate({ marginLeft: "2px", marginTop: "2px" }, 100, function(){ 
         $(this).css({marginLeft:"0px", marginTop:"0px"});
         //On click logic goes here
      });

    }).keyup(function(e){

      if(e.which == 13){
        $(this).trigger('click');
      }
    });