如何使用带有 ENTER 键的 JQuery UI 菜单？

Question

我正在开发一个需要完全由键盘控制的应用程序，到目前为止一切正常，但我无法使 JQuery UI 菜单小部件在使用时正常工作ENTER 键。

根据文档，似乎没有具体的方法来完成这项工作，所以我在列表元素上使用“onclick”

  <li onclick="alert('Books Action')"><div>Books</div></li>

这是一个 jsfiddle (https://jsfiddle.net/djbh6r82/)，示例来自 JQuery UI 文档和第一个菜单项上的警告 -> 当我点击它时它工作正常但是使用 'ENTER' 它只是让我回到开始（专注于菜单不会丢失）

$(function() {
  $("#menu").menu();
});

.ui-menu {
  width: 150px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

<ul id="menu">
  <li class="ui-state-disabled">
    <div>Toys (n/a)</div>
  </li>
  <li onclick="alert('Books Action')">
    <div>Books</div>
  </li>
  <li>
    <div>Clothing</div>
  </li>
  <li>
    <div>Electronics</div>
    <ul>
      <li class="ui-state-disabled">
        <div>Home Entertainment</div>
      </li>
      <li>
        <div>Car Hifi</div>
      </li>
      <li>
        <div>Utilities</div>
      </li>
    </ul>
  </li>
  <li>
    <div>Movies</div>
  </li>
  <li>
    <div>Music</div>
    <ul>
      <li>
        <div>Rock</div>
        <ul>
          <li>
            <div>Alternative</div>
          </li>
          <li>
            <div>Classic</div>
          </li>
        </ul>
      </li>
      <li>
        <div>Jazz</div>
        <ul>
          <li>
            <div>Freejazz</div>
          </li>
          <li>
            <div>Big Band</div>
          </li>
          <li>
            <div>Modern</div>
          </li>
        </ul>
      </li>
      <li>
        <div>Pop</div>
      </li>
    </ul>
  </li>
  <li class="ui-state-disabled">
    <div>Specials (n/a)</div>
  </li>
</ul>

我做错了吗？我尝试了不同的方法（<a href='#' onclick="xxx"></a> 而不是 div，点击 div 而不是 ul）但似乎没有任何效果

Answer 1

当您查看 API 文档时，您将在 https://api.jqueryui.com/menu/ 下看到以下详细信息：

键盘交互

ENTER/SPACE: 调用焦点菜单项的动作，可能是打开子菜单。
UP: 将焦点移动到上一个菜单项。
DOWN: 将焦点移动到下一个菜单项。
RIGHT：打开子菜单（如果可用）。
LEFT：关闭当前子菜单并将焦点移动到父菜单项。如果不在子菜单中，则什么也不做。
ESCAPE：关闭当前子菜单并将焦点移动到父菜单项。如果不在子菜单中，则什么也不做。

Typing a letter moves focus to the first item whose title starts with that character. Repeating the same character cycles through matching items. Typing more characters within the one second timer matches those characters.

Disabled items can receive keyboard focus, but do not allow any other interaction.

因此 Enter 已经启用并将触发菜单的 select 事件。然后，您将希望在 select 回调中执行一些操作。

$(function() {
  $("#menu").menu({
    select: function(e, ui) {
      console.log(ui.item.text().trim(), "Selected");
    }
  }).focus();
});

.ui-menu {
  width: 150px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

<ul id="menu">
  <li class="ui-state-disabled">
    <div>Toys (n/a)</div>
  </li>
  <li>
    <div>Books</div>
  </li>
  <li>
    <div>Clothing</div>
  </li>
  <li>
    <div>Electronics</div>
    <ul>
      <li class="ui-state-disabled">
        <div>Home Entertainment</div>
      </li>
      <li>
        <div>Car Hifi</div>
      </li>
      <li>
        <div>Utilities</div>
      </li>
    </ul>
  </li>
  <li>
    <div>Movies</div>
  </li>
  <li>
    <div>Music</div>
    <ul>
      <li>
        <div>Rock</div>
        <ul>
          <li>
            <div>Alternative</div>
          </li>
          <li>
            <div>Classic</div>
          </li>
        </ul>
      </li>
      <li>
        <div>Jazz</div>
        <ul>
          <li>
            <div>Freejazz</div>
          </li>
          <li>
            <div>Big Band</div>
          </li>
          <li>
            <div>Modern</div>
          </li>
        </ul>
      </li>
      <li>
        <div>Pop</div>
      </li>
    </ul>
  </li>
  <li class="ui-state-disabled">
    <div>Specials (n/a)</div>
  </li>
</ul>

预先给它 focus 允许它已经被调用。

如何使用带有 ENTER 键的 JQuery UI 菜单？

How do you use JQuery UI menu with ENTER key?

html

javascript

jquery-ui

jquery-ui-menu