懸停自動填充建議會使元素消失

Question

我有一個登錄表單，當您將鼠標懸停在鏈接上時，它將顯示自己。基本上，當您懸停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>

如何防止這種行爲？

Answer 1

次嘗試在我刪除懸停時，焦點輸入 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'); 
    }); 

Answer 2

這是一個簡單的例子，雖然你需要使用一點點的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>