如何自定义逻辑实现ENTER键打开jQuery-UI-Selectmenu下拉菜单

直接给Selectmenu生成的触发按钮绑定keydown事件，拦截回车键事件手动调用open方法即可，注意加状态判断避免和菜单打开后的默认回车选中逻辑冲突。

核心逻辑 #

在原有初始化代码后追加这段事件绑定：

const $selectEl = $("#number");
// 绑定组件触发按钮的键盘事件
$selectEl.selectmenu("widget").on("keydown", function(e) {
  // 按下回车 且 当前下拉处于关闭状态时触发打开
  if (e.keyCode === $.ui.keyCode.ENTER && !$selectEl.selectmenu("isOpen")) {
    e.preventDefault();
    $selectEl.selectmenu("open");
    // 打开后聚焦首个菜单项，和空格触发的交互保持一致，符合无障碍要求
    $selectEl.selectmenu("menuWidget").find(".ui-menu-item:first").trigger("focus");
  }
});

完整可运行代码 #

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Number Select</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"> 
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
  <style>
    /* 对应之前添加的overflow类，控制下拉菜单最大高度 */
    .overflow {
      max-height: 200px;
      overflow-y: auto;
    }
  </style>
  <script>
  $( function() { 
    const $numberSelect = $( "#number" );
    $numberSelect
      .selectmenu()
      .selectmenu( "menuWidget" )
        .addClass( "overflow" );

    // 追加回车打开逻辑
    $numberSelect.selectmenu("widget").on("keydown", function(e) {
      if (e.keyCode === $.ui.keyCode.ENTER && !$numberSelect.selectmenu("isOpen")) {
        e.preventDefault();
        $numberSelect.selectmenu("open");
        $numberSelect.selectmenu("menuWidget").find(".ui-menu-item:first").focus();
      }
    });
  } );
  </script>
</head>
<body>
 
<div class="demo"> 
<form action="#"> 
    <select name="number" id="number">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
    </select>
</form> 
</div> 
</body>
</html>

说明 #

• 用jQuery UI内置的$.ui.keyCode.ENTER做按键判断，不需要硬编码keyCode值13，兼容性更好
• 加了isOpen状态判断，下拉打开后按回车还是走默认的选中选项、关闭菜单逻辑，不会产生交互冲突
• 打开后主动聚焦第一个菜单项，和默认空格键触发打开的交互完全一致，满足无障碍访问的交互一致性要求

内容的提问来源于stack exchange，提问作者user19551029