具有自动完成功能但没有默认值的HTML输入

Question

I would like to have an input element inside a form with the usual browser autocomplete but i don't want the browser to set a default value to it.

The expected behavior would be that the input is always rendered empty and when the user clicks it the browser autocompletes kicks in displaying the previous entered values for that field.

I've seen something similar in this login page.

I've tried emptying the input values using javascript on page load but it's not a very clean solution as sometimes i can see the default values showing up and then getting erased.

Any help would be great.

Answer 1

I think this would be your answer... http://liveweave.com/dnEfCD

Just use the 'placeholder' attribute.

 <form id="main">
<input id="email" type="text" placeholder="Email" name="email">
<input id="password" type="password" placeholder="Password" name="password">
 </form>

Answer 2

wantworthy.com/login creates the page with JavaScript. So when it loads, the input fields are not there and the browser can't fill them.

If you don't want to go so far you could only create the input fields after the page has loaded. Maybe something even simpler like changing the names of the fields could to the trick (Fake names before, real names after the page has loaded). But you have to figure out when the browser fills the fields: onDocumentReady, onLoad or even later.

As written in the comments you can use autocomplete="off" in the form tag if you want no browser intervention at all. But that would turn off displaying previously entered values as well.