通过 JavaScript 隐藏现有的 Chrome/Firefox 自动填充下拉菜单

Question

我想在用户将鼠标悬停在我的顶部栏菜单上时隐藏 Chrome 自动填充下拉菜单，因为菜单下拉菜单显示在自动填充下拉菜单下方。

场景是：

用户点击输入框，出现自动填充下拉菜单。
用户将鼠标移动到顶部栏菜单，出现菜单下拉菜单，但它在自动填充下拉菜单下方
所以，当用户将鼠标移动到我的顶部栏菜单时，我想通过 JS 隐藏自动填充下拉菜单。

试验 1

暂时禁用自动填充，并在用户将鼠标移出顶部栏菜单时启用它。

$('.menu-dropdown').on('mouseenter', function() {
  $('input').attr('autocomplete', 'off');
});

虽然它禁用了自动填充，但现有的自动填充下拉列表不会立即隐藏。我需要点击其他地方来隐藏它。之后，自动填充被禁用。

试验 2

在其他元素上触发点击事件（使用真正的鼠标，点击页面上的任意位置将隐藏自动填充下拉列表）：

$('.menu-dropdown').on('mouseenter', function() {
  $('#someOtherElement').click();
});

它不起作用。

试验 3

触发ESC事件：

var esc = $.Event("keydown", { keyCode: 27 });
$('.menu-dropdown').on('mouseenter', function() {
  $("body").trigger(esc);
});

效果不佳。

请帮忙。谢谢。

解决方案

感谢@Focki，这是解决方案：最初禁用输入自动填充，只有在获得焦点时才启用它。模糊时，再次禁用它。

// For Firefox: use `removeAttr`, instead of `attr('autocomplete', 'off'), 
$('input').removeAttr('autocomplete').focus(function() {      
  $(this).attr('autocomplete', 'on'); 
}).blur(function() {    
  $(this).removeAttr('autocomplete'); 
});

// Important: When user moves mouse to the topbar dropdown, trigger the blur event on input
$('.dropdown').on('mouseenter', function () {
  $('input').trigger('blur');
});

Answer 1

确保关闭输入和表单标签的自动完成功能（如果您的输入标签在表单中）。此外，当用户将鼠标放在表单中时，您不必设置该属性。相反，只需在 HTML 本身中设置属性。如果你必须使用 Jquery，这里是代码：

$(document).ready(function() {
    $('form').attr('autocomplete', 'off');
    $('input').attr('autocomplete', 'off');
});

纯Javascript:

document.onload = function() {
    document.getElementsByTagName("input").setAttribute("autocomplete", "off");
    document.getElementsByTagName("form").setAttribute("autocomplete", "off");
};

Answer 2

我希望更改数据列表的 id 会有所帮助，例如在这段代码中...

<!DOCTYPE html>
<html>
<body>
<form>
<input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input id="" type="submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("input").on("input",function(){
        $('datalist').attr('id','sometext'); //add this line of code
// and you can change id back to original state when you want to turn on autocompletion...
    });``
});
</script>
</body>
</html>

也许这会对你有所帮助...

Answer 3

扭转秩序可以解决这个问题。默认情况下将输入的自动完成设置为关闭并启用 onfocus

$('input').on('focus', function() {
  $(this).attr('autocomplete', 'on');
});

通过 JavaScript 隐藏现有的 Chrome/Firefox 自动填充下拉菜单

Hide existing Chrome/Firefox autofill dropdown through JavaScript

javascript

jquery

autocomplete

input

autofill

试验 1

试验 2

试验 3

解决方案