为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

摇曳的蔷薇 2022-09-23 17:06:22

一般信息
使用下拉触发器在具有集成寄存器/登录表单的菜单上工作。

问题
矩阵化 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>

查看完整描述

1 回答

?
qq_花开花谢_0

TA贡献1514条经验 获得超5个赞

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

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


查看完整回答
反对 回复 2022-09-23
  • 1 回答
  • 0 关注
  • 7 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信