Detecting autocomplete on form input with jQuery

Question

I have a form that detects if all the text-fields are valid on each keyup() and focus(); if they\'re all valid, it will enable the submit button for the user to press. Howev

Answer 1

My issue was detecting auto-fill (via a plugin like lastpass or 1password) as well as the issue described above.

The solution that worked for me was:

$(function(){    
    function validate(){
        if($('#email').val() !== '' && $('#password').val() !== '')
            $('#submit').prop('disabled', false);
        else
            $('#submit').prop('disabled', true);
    }

    // Validate after user input
    $('#email, #password').on('keyup change', validate);

    // Validate on mouse enter of body and login form
    // to catch auto-fills from roboform/1password etc...
    $('body, #loginform').on('mouseenter', validate);

    // Validate onload incase of autocomplete/autofill
    validate();
});

See demo in JSFiddle.

Answer 2

You could try using on input to detect text-based changes (except keys like ctrl and shift) in <input>'s.

For example:

$(input).on('input', function() { 
    console.log($(this).val()); 
});

Answer 3

I have a decent solution after having the same problem. Set keyup as normal to our form fields, then mouseover to the surrounding div. So once you click the autocomplete option, you mouse will be over the top of the div:

$("#emailaddress").bind("keyup", function() {
    displayFullSubcribeForm();
});

$(".center_left_box").bind("mouseover", function() {
    displayFullSubcribeForm();
});