XF 2.1 How do I stop browsers from auto-filling a field?

[Jaxel]

I've got a form field:

                    <xf:textboxrow class="host" name="page[page_options][host]" label="{{ phrase('host') }}"
                        value="{$page.page_options.host}" placeholder="127.0.0.1" />
                    <xf:textboxrow class="port" name="page[page_options][port]" label="{{ phrase('port') }}"
                        value="{$page.page_options.port}" placeholder="4444" />
                    <xf:passwordboxrow name="page[page_options][pass]" label="{{ phrase('password') }}"
                        value="{$page.page_options.pass}" placeholder="({{ phrase('optional') }})" />

All three fields are optional. So often they are left blank. The problem I am having is my browser keeps filling the fields out because it thinks it's a login form. It also asks me to save the password after I click submit. How can I stop this?

 

[Snog]

Try adding ac="false" to your row definition.

 

[Jaxel]

Didn't work. Modern browsers don't respect autocomplete="off" anymore.

 

[Snog]

It should work with the textbox row. Not sure about password row.

 

[Ozzy47]

autocomplete="off" should work

 

[Snog]

autocomplete="off" should work

That's what ac="false" does in a textbox row.

 

[Jaxel]

Yeah... but modern browsers don't respect autocomplete="off" anymore.

 

[Snog]

That's correct for password fields. I'm not sure if ac="new-password" would work or not.

 

[Jaxel]

Doesn't work either.

 

[Ozzy47]

Okay, in each field use a random string, autocomplete="nope", autocomplete="pepperoni", autocomplete="steak"

 

[Ozzy47]

It may seem silly but it surprisingly works.

 

[Snog]

It may seem silly but it surprisingly works.

Doesn't in Firefox, at least not the version I'm running.

From what I've found it's not possible to disable password saving in most browsers.

 

[Jaxel]

Doesn't work in Firefox or Chrome for me.

 

[Ozzy47]

Strange.

 

[Ozzy47]

Okay, how about trying a hidden field before each real field.

<input style="display:none" type="password" name="fakepasswordremembered"/>

Change type and name accordingly.

 

[Ozzy47]

Or perhaps a jQuery solution,

jQuery.disableAutoFill plugin - User Guide

 

[Ozzy47]

Another possibility:

<script>
$(document).ready(function(){
$(':input').live('focus',function(){
$(this).attr('autocomplete', 'off');
});
});
</script>

Or this:

<script>
$('form').attr('autocomplete','off');
</script>

 

[Jaxel]

Another possibility:

<script>
$(document).ready(function(){
$(':input').live('focus',function(){
$(this).attr('autocomplete', 'off');
});
});
</script>

Or this:

<script>
$('form').attr('autocomplete','off');
</script>

Again... modern browsers don't support autocomplete="off"