How can I detect that a user has filled an input by using a browser's autocomplete?

Question

I currently have a Log In screen and I disable the Login button until the user has entered their account # and last 4 of their SSN. It works fine so long as the user manually enters this information. However, I run into an issue if the user decides to use auto-complete to fill out the form because they must then tab off of the input field in order for it to register that the input has been entered and enable the Login button.

Is there a way I can automatically enable the LogIn button (assuming the data is correct) as soon as the user auto-completes everything? This is what I have so far:

    $("input[type=text], input[type=password]").on("keyup", enableLogIn);
    $("input[type=text], input[type=password]").bind("paste", enableLogIn);

    function enableLogIn() {
        if ($("#AccountNumber").val().length < 6 || $("#SocialSecurityNumber").val().length < 4) {
            $("#loginButton").attr("disabled", true);
        } else {
            $("#loginButton").attr("disabled", false);
        }
    }

The `change` event requires a focus and blur, that won't work. — DevlshOne, Jul 19 '13 at 19:04
You need something that looks at each keystroke as it is typed. — Robert Harvey, Jul 19 '13 at 19:05
There's no keystroke when you choose from an autocomplete menu. — Barmar, Jul 19 '13 at 19:06
Assuming you are talking about autofill http://stackoverflow.com/a/11710295/1414562 — A. Wolff, Jul 19 '13 at 19:06
http://stackoverflow.com/questions/3066406/jquery-what-listener-do-i-use-to-check-for-browser-auto-filling-the-password-in — DevlshOne, Jul 19 '13 at 19:07
@raam86 How? Autocomplete is done internally by the browser. — Barmar, Jul 19 '13 at 19:08
He's not using the jQuery UI auto-complete plugin, this is the browser's built-in autofill. — Barmar, Jul 19 '13 at 19:09
I think the safest option is autocomplete="off" as roasted mentioned above. http://www.w3schools.com/tags/att_input_autocomplete.asp — Huangism, Jul 19 '13 at 19:09
@Huangism roasted must have deleted that comment, I don't see it. — Barmar, Jul 19 '13 at 19:11
@Barmar i didn't post it as comment but it is what is suggested on link i posted — A. Wolff, Jul 19 '13 at 19:12
He said Assuming you are talking about autofill stackoverflow.com/a/11710295/1414562 — Huangism, Jul 19 '13 at 19:12
@Barmar: roasted linked a different post than the duplicate. It suggests turning autofill off and polling the text box for completion. — Robert Harvey, Jul 19 '13 at 19:12
Oops, I didn't read all the way through the answer in that question. Seems like the wrong solution, especially since there are browser extensions to override `autofill=off` (I use one of them). — Barmar, Jul 19 '13 at 19:14

Barmar · Answer 1 · 2013-07-19T19:17:35.397

0

I think the edit event will be triggered when the field is modified, without waiting for tabbing out. Also notice that you can give multiple events to .on.

$("input[type=text], input[type=password]").on("keyup paste input", enableLogIn);

However, this is probably browser-dependent, I don't think older browsers have this event.

edited Jul 19 '13 at 19:17

answered Jul 19 '13 at 19:06

Barmar

741,623
53
500
612

What is this event 'edit'? When is it fired? Can find DOC on it. Are you taliking about 'oninput' event? – A. Wolff Jul 19 '13 at 19:10
@roasted I think he meant the [input](https://developer.mozilla.org/en-US/docs/Web/Reference/Events/input) event – Blake Plumb Jul 19 '13 at 19:17
You're both right. Fixed. – Barmar Jul 19 '13 at 19:17

How can I detect that a user has filled an input by using a browser's autocomplete?

1 Answers1