How can I avoid browser prepopulating fields in my registration form?

Question

autocomplete="off" is not what I am after. Basically, on my registration form there are fields "phone" and "password" placed one above the other. (see screenshot)

The "phone" field gets, annoyingly, prepopulated with a username, as I guess what the browser is doing - the browser finds a field of type password and assumes the text input field just before it is a username field. The effect is this:

Why I am not interested in the non-standard autocomplete attribute for the phone field, is that I do want user to be able to fill this form as easily as possible and if they have previously entered their phone number on other sites (into fields called "phone") they could benefit from this showing up as they start typing into the field. That's why I don't want to turn autocomplete off altogether.

I was thinking more in the direction of reorganizing the fields somehow to avoid this behaviour. Or some way of telling the browser that the field above the password field has nothing to do with it, or that the password field is not used for authentication purposes. Somehow mark it as that. Or inject some invisible element inbetween these two fields?

Any ideas?

Markup used:

<input id="phone" name="phone" type="text" value="" maxlength="30">
<input id="newPassword" name="newPassword" type="password" value="" maxlength="20">

I am getting this behaviour on Chrome, FF, (not sure about IE, got an archaic version of that on my machine, don't even want to start worrying about IE yet.)

Emulation

similar question, answer not acceptable: #1523712 – Tawnatawney

If you don't want to use autocomplete="off", then I suppose you could use JavaScript to clear the value in the onload event? But without JavaScript I don't think this is possible. – Canard

Try having a read of this: developer.mozilla.org/en/How_to_Turn_Off_Form_Autocompletion (and similar docs). You might get lucky and it will be easy, but chances are there will be implementation-specific issues anyway. It may be appropriate to consider a re-ordering on the basis that it is the "expected" approach, but I agree that it would be nice if it were more customisable. – Dennett

excellent comments, David, Noon. You could have added these as answers. JavaScript seems like could do the job, the mozilla link was an interesting read. Thanks, guys – Tawnatawney

i've still got no answers. @DavidThomas please repost comments as answers, so you can collect some rep. Otherwise I will just have to go with one of your suggestions and then post my own solution and accept that as answer. And I don't like doing that. – Tawnatawney

@PeterPerháč hey man, i've updated my answer so you can better utilize the method you are using at present stage without having to worry about getting space character sent to server and without having to worry about your users dealing with the extra space. – Rectifier

Answer 1

Most password managers will search the first password field, and the closest text field before it.

So all you have to do is add invisible text and password fields (display:none) above "new password".

Firefox tries to interpret 3 password fields as a "change password" action, so if you don't want that you should be safe adding yet another invisible password field.

Bim

Thanks for the mozilla code link! Your suggestion successfully fools mozilla out of coloring and pre-populating the fields that you don't want it to. But it does not stop the browser from asking the user, after form submission, if they want to change the saved password for a field that it still assumes is a username even if it's not. Still working on a more complete workaround here. – Hydrant

Answer 2

I had a similar issue with the set password field. Try

<input type="password" autocomplete="new-password">

From MDN input documentation:

autocomplete

This attribute indicates whether the value of the control can be automatically completed by the browser.

Possible values are:

....new-password: A new password (e.g. when creating an account or changing a password)

For the phone number issue, I set this and it stopped autocompleting the username there.

<input type="tel">

Synaeresis

This solution does not work on modern browsers. Chrome just ignores "autocomplete" attribute – Joint

Answer 3

A home number cannot be 30 characters, this is probably why the browser is assuming it could be a username or login email due to the size. Change it to something real and see what happens.

Also, consider having 3 field for phone number, area code, prefix, suffix. Once a certain number of digits are filled, you can auto focus using JavaScript the next phone segment field so it's easier for user.

Have you also tried changing positions of fields? What's happened?

Also, just to make sure, you can turn off auto complete on a particular item during registration without worrying that it will be off during login (cuz it won't) unless you turned it off for the login fields as well, and of course you have no need to.

Also, delete your unused saved form auto complete stuff, could just be a local issue with your version, you may have entered a bad value one day in one of the browsers, and then you installed the other browser (chrome or FF), and then the newly installed browser copied the rules exactly as they were from your original browser.... So, you end up thinking it's a global issue with your form, simply because of one bad entry and because your second installed browser copied and replicated the bad entry rule from your first browser, making it look like a real, universal problem to you, get me? So try the browsers InPrivate modes, or try the browsers from a different installation or a different computer, or from a virtualpc instance you may have.

Otherwise, export all your setting from your browsers and uninstall both browsers, then reinstall from scratch FF and chrome, then test your webpage, then feel free to import your exported settings back.

Also, test on IE even if it is for the insight it may give you, know what I mean?

Hope this helps, let me know how you get on, and if you have any other questions.

UPDATE:

Given the method you've chosen, what you should be able to do is, when rendering the phone field, add a value=" " attribute into the input tag, instead of using JavaScript. This should prevent the pre-filling from occuring without needing to use javascript. Now, if you want to go one step further, you can do this:

During the OnLoad Event of when page loads, check the phone field using JavaScript, and if the value equals one space (" ") then overwrite it with an empty string using JavaScript once onLoad is triggered. Or, if the browser is still prefilling (i doubt it will but if it is) you can delay this check by a few hundred milliseconds and run the javascript a few hundred milliseconds after the page has loaded, or tie it to all or some of the input fields onFocus events, so as soon as any of the fields gain focus, you do the "does phone.value equals one space character (" ") and if it does, overwrite it with and empty string, i'm even more certain the browser isn't going to jump in and hijack that field in this situation. Although, as mentioned, even if you do this onLoad, i doubt the browser will hijack your field, as the pages/javascript onload occurs AFTER the browsers internal onLoad (DocumentComplete) event occurs, and worst case scenario, you can do the few hundred millisecond lag or onFocus method, but i doubt you will need these.

Let me know how it goes.

Rectifier

thanks for all your suggestions. It was definitely not in the way my browser(s) were installed as this was happening consistently across multiple machines/browser versions. I solved the issue using JavaScript, as @DavidThomas suggested – Tawnatawney

Answer 4

I tried disabling the input fields type=text& type=password after loading of the DOM then enabled all the disabled fields after certain milliseconds lets say 100. It seems to be working for me. Try :

$(document).ready(function()
{
$("input[type=text],input[type=password]").prop('disabled','disabled');

$("body").delay(10,function(){
    $("input[type=text],input[type=password]").prop('disabled','');
    });
});

Dissuasion