javascript或jquery键盘事件

我想通过单击键盘左右按钮（37和39）来控制下一个和上一个按钮

我试图编写一个javascript代码来实现这一点，但它只适用于第一个和第二个选项卡

下面是没有css的完整代码

<?php 

      $nexticon = '<span style="font-size: 28px;"><i class="fi-arrow-right"></i></span>';
      $previousicon = '<span style="font-size: 28px;"><i class="fi-arrow-left"></i></span>';

     ?>


<div style="position: absolute; z-index: 7;">


     <!-- multistep form -->
<form id="msform" method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" autocomplete="off">


<!-- fieldsets -->
<fieldset>


 bla bla bla page 1


     <button class="next action-button-next" type="button" style=" position: absolute; top: 990px; left:380px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $nexticon ?></i></button>


     </fieldset>

<fieldset>







    <form name="change">


 bla bla bla page 2

     <button class="previous action-button-previous" type="button" style=" position: absolute; top: 990px; left:135px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $previousicon ?></button>
     <button class="next action-button-next" type="button" style=" position: absolute; top: 990px; left:380px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $nexticon ?></button>
</fieldset>


<fieldset>


   bla bla bla page 3


     <button class="previous action-button-previous" type="button" style=" position: absolute; top: 990px; left:135px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $previousicon ?></button>
     <button class="next action-button-next" type="button" style=" position: absolute; top: 990px; left:380px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $nexticon ?></i></button>
</fieldset>


<fieldset>


    bla bla bla page 4


     <button class="previous action-button-previous" type="button" style=" position: absolute; top: 990px; left:135px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $previousicon ?></button>
     <button class="next action-button-next" type="button" style=" position: absolute; top: 990px; left:380px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $nexticon ?></i></button>
</fieldset>

<fieldset>


   bla bla bla page 5

     <button class="previous action-button-previous" type="button" style=" position: absolute; top: 990px; left:135px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $previousicon ?></button>
     <button class="next action-button-next" type="button" style=" position: absolute; top: 990px; left:380px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $nexticon ?></i></button>
</fieldset>

<fieldset>


    bla bla bla page 6

     <button class="previous action-button-previous" type="button" style=" position: absolute; top: 990px; left:135px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $previousicon ?></button>
     <button class="next action-button-next" type="button" style=" position: absolute; top: 990px; left:380px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $nexticon ?></i></button>
</fieldset>

<fieldset>


   bla bla bla page 7


     <button class="previous action-button-previous" type="button" style=" position: absolute; top: 990px; left:135px; background-color: Transparent; background-repeat:no-repeat; border: none; cursor:pointer; overflow: hidden; outline:none; "> <?php echo $previousicon ?></button>

</fieldset>
     <!-- progressbar -->
<ul id="progressbar">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
     </form>







<!-- jQuery easing plugin -->    
        <script src="js/jquery.easing.min.js" type="text/javascript"></script> 
        <script>
        $(function() {

        //jQuery time
        var current_fs, next_fs, previous_fs; //fieldsets
        var left, opacity, scale; //fieldset properties which we will animate
        var animating; //flag to prevent quick multi-click glitches

        $(".next").click(function(){
                if(animating) return false;
                animating = true;

                current_fs = $(this).parent();
                next_fs = $(this).parent().next();

                //activate next step on progressbar using the index of next_fs
                $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

                //show the next fieldset
                next_fs.show(); 
                //hide the current fieldset with style
                current_fs.animate({opacity: 0}, {
                        step: function(now, mx) {
                                //as the opacity of current_fs reduces to 0 - stored in "now"
                                //1. scale current_fs down to 80%
                                scale = 1 - (1 - now) * 0.2;
                                //2. bring next_fs from the right(50%)
                                left = (now * 50)+"%";
                                //3. increase opacity of next_fs to 1 as it moves in
                                opacity = 1 - now;
                                current_fs.css({'transform': 'scale('+scale+')'});
                                next_fs.css({'left': left, 'opacity': opacity});
                        }, 
                        duration: 800, 
                        complete: function(){
                                current_fs.hide();
                                animating = false;
                        }, 
                        //this comes from the custom easing plugin
                        easing: 'easeInOutBack'
                });
        });

        $(".previous").click(function(){
                if(animating) return false;
                animating = true;

                current_fs = $(this).parent();
                previous_fs = $(this).parent().prev();

                //de-activate current step on progressbar
                $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

                //show the previous fieldset
                previous_fs.show(); 
                //hide the current fieldset with style
                current_fs.animate({opacity: 0}, {
                        step: function(now, mx) {
                                //as the opacity of current_fs reduces to 0 - stored in "now"
                                //1. scale previous_fs from 80% to 100%
                                scale = 0.8 + (1 - now) * 0.2;
                                //2. take current_fs to the right(50%) - from 0%
                                left = ((1-now) * 50)+"%";
                                //3. increase opacity of previous_fs to 1 as it moves in
                                opacity = 1 - now;
                                current_fs.css({'left': left});
                                previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
                        }, 
                        duration: 800, 
                        complete: function(){
                                current_fs.hide();
                                animating = false;
                        }, 
                        //this comes from the custom easing plugin
                        easing: 'easeInOutBack'
                });
        });



        });
        </script>

你把你的处理者放在哪里？我猜不出你有什么好办法

我会这样做：

由于与单个实例绑定可能会强制用户关注这些字段集容器，因此我将在文档中注册一个全局事件处理程序。通过检查当前可见字段集及其子导航按钮的可见性，它能够执行显示动画的相应操作

$(function() {
  $('#ctnFieldSets div').each(function( index ) {
    var fs = $(this);

    // hide buttons
    if (!fs.prev('div').length) fs.find('button.prev').hide();
    if (!fs.next('div').length) fs.find('button.next').hide();

    // hide pages
    if (index > 0) fs.hide();
  });

  // register handlers for buttons
  $('#ctnFieldSets div button.prev, #ctnFieldSets div button.next').bind({
    click: function(e) {
      var btn = $(this);
      var fs = $(btn.parent('div')[0]);

      fs.hide();
      if (btn.is('.prev')) {
        // animation here //
        $(fs.prev('div')[0]).show();
        return;
      }

      if (btn.is('.next')) {
        // animation here //
        $(fs.next('div')[0]).show();
        return;
      }
    }
  });

  // register global event handler for keydown. you may bind to other objects if
  // you don't want to be global event handler

  $(document).bind({
    keydown: function(e) {
      // you should check targets here. skips when target could input text
      if ($(e.target).is('input,textarea')) return;

      var fs = null;

      switch(e.keyCode) {
        case 37:
          fs = $($('#ctnFieldSets div:visible').first()[0]);
          if (!fs.find('button.prev:visible').length) return;

          // animation here //
          fs.hide();
          $(fs.prev('div')[0]).show();
          break;

        case 39:
          fs = $($('#ctnFieldSets div:visible').first()[0]);
          if (!fs.find('button.next:visible').length) return;

          // animation here //
          fs.hide();
          $(fs.next('div')[0]).show();
          break;

        default:
          return;
      }
    }
  });
});


<div id="ctnFieldSets">
  <div><button class='prev'>Prev</button>Div1<input><button class='next'>Next</button></div>
  <div><button class='prev'>Prev</button>Div2<input><button class='next'>Next</button></div>
  <div><button class='prev'>Prev</button>Div3<input><button class='next'>Next</button></div>
</div>

$（函数（）{
$（'#ctnFieldSets div'）。每个（函数（索引）{
var fs=$（本）；
//隐藏按钮
如果（！fs.prev（'div'）.length）fs.find（'button.prev'）.hide（）；
如果（！fs.next（'div'）.length）fs.find（'button.next'）.hide（）；
//隐藏页面
如果（索引>0）fs.hide（）；
});
//按钮的寄存器处理程序
$（'#ctnFieldSets div button.prev，#ctnFieldSets div button.next'）.bind({
点击：功能（e）{
var btn=$（本）；
var fs=$（btn.parent（'div'）[0]）；
fs.hide（）；
如果（btn.is（'.prev'））{
//这里是动画//
$（fs.prev（'div'）[0]）.show（）；
返回；
}
if（btn.is（'.next'））{
//这里是动画//
$（fs.next（'div'）[0]）.show（）；
返回；
}
}
});
//为keydown注册全局事件处理程序。如果
//您不想成为全局事件处理程序
$（文档）.bind({
向下键：功能（e）{
//您应该在此处检查目标。当目标可以输入文本时跳过
if（$（e.target）.is（'input，textarea'））返回；
var-fs=null；
开关（如钥匙代码）{
案例37：
fs=$（$（'#ctnFieldSets div:visible'）.first（）[0]）；
if（！fs.find（'button.prev:visible'）.length）返回；
//这里是动画//
fs.hide（）；
$（fs.prev（'div'）[0]）.show（）；
打破
案例39：
fs=$（$（'#ctnFieldSets div:visible'）.first（）[0]）；
if（！fs.find（'button.next:visible'）.length）返回；
//这里是动画//
fs.hide（）；
$（fs.next（'div'）[0]）.show（）；
打破
违约：
返回；
}
}
});
});
PrevDiv1Next
PrevDiv2Next
PrevDiv3Next
我在显示的代码中没有看到任何关键事件处理程序。另外，如果焦点在文本输入中会怎样？（假设您有文本输入…）然后箭头键应该在输入中移动光标，而不是执行页面导航。@nnnn我用完整的代码添加了新答案代码工作正常，但我还想从键盘箭头控制下一个和上一个答案请不要在答案中添加其他详细信息，你的问题并添加到那里。我编辑了这篇文章