How to trigger saved password autofill in browsers?

Question

I have a web application written in pure JavaScript (no pre-generated HTML except for the document which loads all the JS files).

This app contains a login form which is created dynamically when the document.ready event event is triggered. I trick the browser into displaying the "Remember password?" dialog by posting the login form into a hidden iframe before logging in using ajax (in Firefox the password appears on the saved password list, so this part obviously works) but saved passwords never get filled in after the login screen is loaded again at a later time. The same thing happens in Firefox and Safari.

Is there something I can do or some function I can call to trigger autofill?

UPDATE: autofill works in Safari on initial page load, but not when user logs out and the login form is recreated without a page reload. In Firefox it never works.

Answer 1

In addition to wrap the form elements in a form element, make sure all the input (and maybe even the form) has unique name and id attributes that doesn't change. The name should probably be something descriptive like password for the password etc., not really sure to which degree browsers use this info, but "autosuggest"/"magic wand" features may work better if you use a standard name.

And of course you should make sure you're not setting any autosuggest/autofill attributes to false (the js framework might do so for some reason, if you're using any).

A third possibility is that some browsers maybe does autofill before your script loads and writes the form to the page, try making a static html version of the form and see if that works.

The easiest solution (if static forms work) is to force a page reload on logout (you probably do want to discard the "state" of the running javascript after log-out anyway, so refreshing is really a Good Thing)

Answer 2

Some browsers require "form" tag to enable local username & password storage. Had the same problem in AJAX application, and in my case I just added

<form>...</form>

tags.