javascript - 如何只能在选定的链接上按回车键继续？

Question

现在，您可以使用箭头键浏览链接列表，它们会通过 css 突出显示，但我希望能够按 Return 继续到选定的链接被突出显示。关于如何做到这一点的任何想法？

抱歉，如果代码很乱，很新。

var li = $('li');
var liSelected;

$(window).keydown(function(e) {
  if (e.which === 40) {
    if (liSelected) {
      liSelected.removeClass('selected');
      next = liSelected.next();
      if (next.length > 0) {
        liSelected = next.addClass('selected');
      } else {
        liSelected = li.eq(0).addClass('selected');
      }
    } else {
      liSelected = li.eq(0).addClass('selected');
    }
  } else if (e.which === 38) {
    if (liSelected) {
      liSelected.removeClass('selected');
      next = liSelected.prev();
      if (next.length > 0) {
        liSelected = next.addClass('selected');
      } else {
        liSelected = li.last().addClass('selected');
      }
    } else {
      liSelected = li.last().addClass('selected');
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="meny">
  <ul>
    <li id="start"><a href="Spill/spill.html">Start new game</a></li>
    <li id="settings"> <a href="#">Setting</a></li>
    <li id="help"> <a href="#">Help</a></li>
    <li id="exit"> <a href="#">Exit</a></li>
  </ul>
</div>

 

 <!-- language: lang-css -->
  li.selected {
  color:white; font-size: 32px;}

  a {
  color:inherit;
  }
  a:focus {color:white; font-size: 32px; text-decoration: none;}

  ul
   {
  text-decoration: none;
  list-style-type: none;
  }
  <!-- end snippet -->

Answer 1

要完成这项工作，您可以监听返回键，代码 13，然后单击 li 中包含的 a 元素，该元素具有 .selected 类。但是，您应该注意，此行为可能会干扰您在 DOM 中拥有的任何 form 元素，并且如果您需要保持 ISO 合规性，也会破坏可访问性规则。

还请记住，您可以在向上/向下箭头键按下时干掉控制 li 元素选择的逻辑。试试这个:

var $li = $('li');

$(window).keydown(function(e) {
  if (e.which === 40 || e.which === 38) {
    e.preventDefault();
    var goingDown = e.which === 40;
    var $selected = $li.filter('.selected');
    $selected.removeClass('selected');

    var $target = $selected[goingDown ? 'next' : 'prev']();
    if (!$target.length)
      $target = $li[goingDown ? 'first' : 'last']();

    $target.addClass('selected');
  }
  
  if (e.which === 13) {
    var $selected = $li.filter('.selected');
    if ($selected.length)
      $selected.find('a')[0].click();
  }
});

// only for debugging:
$('a').click(function(e) {
  e.preventDefault();
  console.log(`You clicked ${$(this).text()}!`);
});

.selected,
.selected a {
  color: #C00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="meny">
  <ul>
    <li id="start"><a href="Spill/spill.html">Start new game</a></li>
    <li id="settings"><a href="#">Setting</a></li>
    <li id="help"><a href="#">Help</a></li>
    <li id="exit"><a href="#">Exit</a></li>
  </ul>
</div>

最后，请注意在箭头键处理程序中使用 preventDefault() 以在按下箭头键时停止滚动页面，这是标准行为。