CODEWITHSUNDEEP
javascriptjqueryinputautocompleteautofill
Joy
Joy

Reputation: 9560

Hide existing Chrome/Firefox autofill dropdown through JavaScript

I would like to hide the Chrome autofill dropdown when user hovers on my topbar menus, because the menu dropdown appears below the autofill dropdown.

The scenario is:

  1. user clicks the input box, the autofill dropdown appears.
  2. user moves mouse to topbar menu, menu dropdown appears, but it is below the autofill dropdown
  3. So, i want to hide the autofill dropdown through JS when user moves mouse to my topbar menu.

Trial 1

Disable the autofill temporarily, and enable it when user move mouse out of the topbar menu.

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

Althought it disables the autofill, the existing autofill dropdown does not hide immediately. I need to click somewhere else to hide it. After that, the autofill is disabled.

Trial 2

Trigger click event on some other element (use the real mouse, click any where on the page will hide the autofill dropdown):

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

It is not working.

Trial 3

Trigger the ESC event:

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

Not working as well.

Please kindly help. Thanks.

Solution

Thanks to @Focki, here is the solution: disable the input autofill initially, only enable it when focused. When blured, disable it again.

// 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');
});

Upvotes: 3

Views: 2152

Answers (3)

Focki
Focki

Reputation: 150

Twisting the order can work on this issue. Set the Input´s autocomplete to off by default and enable it onfocus

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

Upvotes: 2

sanjeevprasad
sanjeevprasad

Reputation: 854

I hope changing the id of datalist will help for example in this code...

<!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>

may be this will help you...

Upvotes: 1

Rishi
Rishi

Reputation: 419

Make sure you turn of the autocomplete for the input and form tag(If your input tag is in the form). Also, you don't have to set the attribute when the user puts there mouse in the form. Instead, just set the attribute in the HTML itself. If you must do it with Jquery, Here is the code:

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

Pure Javascript:

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

Upvotes: -1

Related Questions