常规信息
使用下拉触发器处理带有集成注册/登录表单的菜单。
问题
Matrialize CSS有一个默认选项来禁用自动关闭菜单:CloseonClick:false
。 这很好用。 问题是当按下Tab时它仍然关闭菜单。 许多用户(包括我)按Tab键快速浏览WebForms。 所以我在努力阻止这一切。
我尝试的解决方案
根据这个密切相关的问题中的建议:防止在单击materializecss下拉列表时关闭它,我尝试了类似的方法来处理keydown,keyup和keypress事件。 没有任何效果:
$('.dropdown-button + .dropdown-content').on('keyup', function(event) {
event.stopPropagation();
});
可接受的解决方案
使用html,css,javascript和/或jQuery可接受解决方案。
在下拉表单中单击MCVE
可以正常工作。 按Tab键,它会关闭菜单。
null
$(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>
null
我没有意识到event.stopPropagation();
并不阻止同一元素上的其他处理程序运行。 之后的解决方法相当简单:
$('#form-login').on('keydown', function(event) {
event.stopPropagation();
});