防止在 Materialize CSS 菜单中按 Tab 键关闭下拉菜单

Question

一般信息
使用下拉触发器处理带有集成注册/登录表单的菜单。

问题
Matrialize CSS 具有禁用自动关闭菜单的默认选项：closeOnClick: false。这工作得很好。问题是按下 Tab 键时它仍然关闭菜单。许多用户（包括我）按 Tab 键可以快速浏览网络表单。所以我试图阻止这种情况。

我试过的解决方法
按照这个密切相关的问题中的建议：我已经尝试过类似的 keydown、keyup 和 keypress 事件。 None 有任何影响：

$('.dropdown-button + .dropdown-content').on('keyup', function(event) {
    event.stopPropagation();
});

可接受的解决方案
使用 html、css、javascript 和/或 jQuery.

的解决方案是可以接受的

MCVE
单击下拉表单可以正常工作。按 Tab 键关闭菜单。

$(document).ready(function(){
  $(".dropdown-trigger").dropdown({
   alignment: 'left',
   constrainWidth: false,
   coverTrigger: false,
   closeOnClick: false,
   hover: false
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<ul id="usermenu" class="dropdown-content dropdown-menu">
 <li>
  <div class="row no-bottom">
   <div id="login" class="col s12">
    <form id="form-login">
     <div class="row">
      <div class="col s12">
       <label>Username</label>
       <input type="text" class="browser-default form-input" placeholder="Username" id="username"/>
      </div>
     </div>
     <div class="row no-bottom">
      <div class="col s12">
       <label>Password</label>
       <input type="password" class="browser-default form-input" placeholder="Password" id="password"/>
      </div>
     </div>
    </form>
   </div>
  </div>
 </li>
</ul>
<nav class="nav-center grey darken-3">
 <div class="nav-wrapper">
  <a href="#" data-target="mobile-menu" class="sidenav-trigger hide-on-med-and-up"><i class="material-icons">menu</i></a>
  <ul id="nav-mobile" class="hide-on-small-only">
   <li><a class="dropdown-trigger" href="#" data-target="usermenu">Login<i class="material-icons right">arrow_drop_down</i></a></li>
  </ul>
 </div>
</nav>

Answer 1

我没有意识到 event.stopPropagation(); 不会阻止同一元素上的其他处理程序来自运行。之后的解决方案非常简单：

$('#form-login').on('keydown', function(event) {
    event.stopPropagation();
});

防止在 Materialize CSS 菜单中按 Tab 键关闭下拉菜单

Prevent dropdown closing on pressing Tab in Materialize CSS menu

javascript

css

jquery

materialize