防止在“具体化 CSS”菜单中按 Tab 键时下拉关闭

Question

一般信息使用下拉触发器在具有集成寄存器/登录表单的菜单上工作。问题矩阵化 CSS 有一个默认选项来禁用菜单的自动关闭：。这工作得很好。问题是，当按下Tab时，它仍然关闭菜单。许多用户（包括我）按 Tab 键可快速浏览 Web 表单。所以我试图阻止这种情况。closeOnClick: false我尝试过的解决方案 遵循这个密切相关的问题中的建议： 防止在单击内部时关闭具体化下拉列表 我尝试过与键降，键控和按键事件类似的操作。没有任何影响：$('.dropdown-button + .dropdown-content').on('keyup', function(event) {     event.stopPropagation(); });可接受的解决方案使用 html、css、脚本和/或 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>

Answer 1

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

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