Disable browser autofill on input?

This is probably something simple that I’m missing. I tried a couple of things without any success.

Tim

Looks like it is a setting in the form element:

It should be possible to inject it with JS code. Do you know how to do that?

Regards,
Mark

Hi @mark-piller. I want to disable it for individual inputs, not the entire form. Some should still be auto-fillable. I thought about doing this with JS, but am still not sure how to reference a specific input because the name/ID from UI-Builder doesn’t end up in the HTML (as discussed in another thread).

Tim

If you find a way to do it with basic HTML/JS, please let us know. If browsers support it, we can too.

It seems like there should be an input in UI-Builder for additional attributes of an element.

Here’s a solution:

  1. Put your input component into Block (separate block for each input for which you need to disable autocomplete
  2. Assign an anchor value for the Block component:
    UI Builder - ConsoleDemo - Backendless - Google Chrome 2022-03-18 12.56.33
  3. Drag the Custom Code block into the page logic for the On Page Enter event:
    UI Builder - ConsoleDemo - Backendless - Google Chrome 2022-03-18 13.01.17
  4. Click the gear icon for the Custom Code block and add the following code:
var myInput = document.getElementById('myInputHolder').getElementsByTagName('input')[0];
myInput.setAttribute( "autocomplete", "off");
  1. Click Save and Close and run the page.

Your input component should now have the autocomplete attribute:
https___www.backendless.us_api_files_ui-builder_containers_support_index.html_page=autocomplete - Google Chrome 2022-03-18 13.03.45

Regards,
Mark

That’s a great workaround, thanks @mark-piller!

Unfortunately, Chrome seems to ignore the tag so I’ll need to come up with something else, but your solution was dead on for what I was trying to do.

Tim

As a follow up I stopped chrome from trying to autofill by setting autofill to a unique value. Like this:

myInput.setAttribute( “autocomplete”, “searchinput”);

Thanks again @mark-piller