如何解决当虚拟键盘出现在移动设备上时,移动设备下拉菜单关闭
我在React中有一个下拉菜单,可以通过汉堡包按钮(仅在移动设备上)进行切换。当用户在菜单外点击时,我想使其关闭,所以我添加了一个eventListener。这是它的代码:
toggleRespDropDown = () => {
// short function for getElementById
var dd = this.getE('navdd');
var handler = function(e){
if(dd.contains(e.target)) {
} else {
dd.style.display = 'none';
document.removeEventListener('click',handler,false)
}
}
if(dd.style.display !== 'flex') {
dd.style.display = 'flex';
document.addEventListener('click',false)
} else {
dd.style.display = 'none';
document.removeEventListener('click',false)
}
}
它可以正常工作,但是下拉菜单包含两个用于输入用户名和密码的输入,以使用户能够登录。在移动设备上,每当我点击其中一个输入字段时,当出现Android键盘时,下拉菜单关闭。在devTools中的Chrome中不会发生这种情况(它不使用虚拟键盘)。我不知道是什么触发了菜单的关闭。欢迎任何建议。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。