Question

我有单选按钮

  Are you SSC Passed
 <input tabindex='1'  type='radio' name='categoryName1'   id='radio1' /> 
  <input tabindex='2'  type='radio' name='categoryName1'   id='radio2' /> 

  Are you Holding Passport

 <input tabindex='3'  type='radio' name='categoryName2'   id='radio3' /> 
  <input tabindex='4'  type='radio' name='categoryName2'   id='radio4' />

当左右键按下

时，Jquery Code移动到下一个控件

$(document).on('keydown', 'input,select,textarea,a,button', function (e) {
        if (e.which == 37) {
            var tabIndexKey =  document.activeElement.tabIndex-1;

            $('[tabindex=' + tabIndexKey + ']').focus();

        }
        if (e.which == 39) {
            var tabIndexKey =  document.activeElement.tabIndex+1;
            $('[tabindex=' + tabIndexKey + ']').focus();


        }
    });

但问题是当我按箭头键焦点没有移动到tabindex 3。它再次移动到1或2。

Answer 1

您的代码是正确的，但您有两组单选按钮。 1. SSC通行证 2.护照保留

现在您可以在两个选项之间切换[例如：SSC Pass [Y，N]，Passport Hold [Y，N]]或者如果您想在Four选项之间导航，您必须将所有单选按钮命名为CategoryName1或CategoryName2

$(document).on('keydown', 'input,select,textarea,a,button', function (e) {
        if (e.which == 37) {
            var tabIndexKey =  document.activeElement.tabIndex-1;

            $('[tabindex=' + tabIndexKey + ']').focus();

        }
        if (e.which == 39) {
            var tabIndexKey =  document.activeElement.tabIndex+1;
            $('[tabindex=' + tabIndexKey + ']').focus();


        }
    });

$(document).on('keydown', 'input,select,textarea,a,button', function (e) {

        if (e.which == 37) {
            var tabIndexKey =  document.activeElement.tabIndex-1;
            $('[tabindex=' + tabIndexKey + ']').focus();
            alert(e.which+': '+document.activeElement.tabIndex);

        }
        else if (e.which == 39) {
            var tabIndexKey =  document.activeElement.tabIndex+1;
            $('[tabindex=' + tabIndexKey + ']').focus();
            alert(e.which+': '+document.activeElement.tabIndex);
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Are you SSC Passed
 <input tabindex='1'  type='radio' name='categoryName1'   id='radio1' /> 
  <input tabindex='2'  type='radio' name='categoryName1'   id='radio2' /> 

  Are you Holding Passport

 <input tabindex='3'  type='radio' name='categoryName2'   id='radio3' /> 
  <input tabindex='4'  type='radio' name='categoryName2'   id='radio4' />

按左/右箭头键时，将焦点更改为下一个选项卡索引控件jquery

1 个答案: