防止在“具体化 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',&nbsp;function(event)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;event.stopPropagation(); });