悬停自动填充建议会使元素消失
问题描述:
我有一个登录表单,当您将鼠标悬停在链接上时,它将显示自己。基本上,当您悬停a
时,表单将其规则更新为display: none
至display: block
悬停自动填充建议会使元素消失
当我开始填写字段时,浏览器根据先前的输入显示建议。但是当我想要选择建议时,element
将自己重新设置为display: none
。我不想设置autocomplete="off"
。
示范
* {
box-sizing: border-box;
}
form {
display: none;
}
div:hover form {
background-color: #f1f1f1;
display: block;
padding: 15px;
}
<p>Fill in a sample username and password, after that you get an fiddle error. Just reload the fiddle and then the autocomplete shows you suggestions</p>
<div class="hover">
<span>HOVER TO SHOW LOGIN FORM</span>
<form method="post">
<input type="text" id="username" name="username" placeholder="username" />
<input type="password" id="password" name="password" placeholder="password" />
<input type="submit" name="login" value="login" />
</form>
</div>
如何防止这种行为?
答
次尝试在我删除悬停时,焦点输入 a fiddle
$('input').blur(function() {
$('.wrapper').addClass('hover');
})
.focus(function() {
$('.wrapper').removeClass('hover');
});
UPDATE
您可以添加鼠标离开也是如此,一旦悬停鼠标离开输入
updated fiddle
$('input').blur(function() {
$('.wrapper').addClass('hover');
})
.mouseleave(function() {
$('.wrapper').addClass('hover');
})
.focus(function() {
$('.wrapper').removeClass('hover');
});
答
这是一个简单的例子,虽然你需要使用一点点的js,但我不认为你没有它可以解决这个问题。
为了简单起见,我在这里使用了jquery,只是操纵了css属性,但你也可以使用vanilla js并添加一个类或类似的东西。
我还包裹在另一格形式,而周围的测试,你可能不一定需要是:
,我并没有改变显示回来时,你点击别的地方,因为说实话,那会是恼人的地狱,如果你已经点击的形式和意外点击别的地方,有它消失了....但是你可以添加,当然;)
$("form").click(()=>
{
$(".hideForm").css("display","block");
})
* {
box-sizing: border-box;
}
.hideForm {
display: none;
}
div:hover .hideForm{
display:block;
}
form {
background-color: #f1f1f1;
display: block;
padding: 15px;
}
div form {
background-color: #f1f1f1;
display: block;
padding: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Fill in a sample username and password, after that you get an fiddle error. Just reload the fiddle and then the autocomplete shows you suggestions</p>
<div class="hover">
<span>HOVER TO SHOW LOGIN FORM</span>
<div class="hideForm">
<form method="post">
<input type="text" id="username" name="username" placeholder="username" />
<input type="password" id="password" name="password" placeholder="password" />
<input type="submit" name="login" value="login" />
</form>
</div>
</div>
类将被添加你使用哪种浏览器? –
你可以添加自动完成=“关闭”属性 –
所有浏览器同样的问题。 IE,FF和Chrome。我不想设置自动完成=“关闭” – Red