如何使用帶有 ENTER 鍵的 JQuery UI 菜單？

Question

我正在開發一個需要完全由鍵盤控制的應用程序，到目前為止一切都很好，但是當使用 ENTER 鍵時，我無法使 JQuery UI 菜單小部件工作。

從文檔來看，似乎沒有具體的方法來完成這項工作，所以我在列表元素上使用“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，onclick 在 div 而不是 ul）但似乎沒有任何效果

Answer 1

當您查看 API 文檔時，您將在https://api.jqueryui.com/menu/下看到以下詳細信息：

鍵盤交互

• ENTER/SPACE ：調用焦點菜單項的操作，這可能是打開子菜單。
• UP ：將焦點移至上一個菜單項。
• DOWN ：將焦點移至下一個菜單項。
• RIGHT ：打開子菜單（如果有）。
• LEFT ：關閉當前子菜單並將焦點移至父菜單項。 如果不在子菜單中，則什么也不做。
• ESCAPE ：關閉當前子菜單並將焦點移至父菜單項。 如果不在子菜單中，則什么也不做。

鍵入一個字母會將焦點移至標題以該字符開頭的第一個項目。 通過匹配的項目重復相同的字符循環。 在一秒計時器內鍵入更多字符與這些字符匹配。

禁用的項目可以接收鍵盤焦點，但不允許任何其他交互。

因此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允許它已經被調用。