Question

当选择按钮并按下某个键时，如何添加“按下按钮”效果？实际印刷机的行为起作用，它只是没有效果。

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

谢谢！

Answer 1

我会保存当前具有此焦点的元素的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 2

试试这个

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

Answer 3

这是一个小提琴示例：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);
});

使用JQuery在keydown上添加“按钮”效果？

3 个答案: