Disable Chrome autofill in text inputs

heath22

It appears that Chrome is acting weird and auto-filling fields that it shouldn't autofill.
I see discussions on the forum about password fields but it appears that it's affecting all types of field not just passwords.

For example the "Age" field in this select2 field gets autofilled with the "State" information saved in Chrome. It also does it for regular search text inputs for the same example ( i tested).

Wrapping the input field in a form works:
<form autocomplete="off"> .. your input field.. </form>

For example for regular DataTables input text fields:
$(this).html( ' <form autocomplete="off"><input type="text" style="text-align:center" autocomplete="off" placeholder="Search '+title+'" /></form>' );

While wrapping the select2 fields works, the tags you enter in the select field no longer filter the datatable.
I'm assuming this is because the data is "one more level deep".
How do you deal with this?

var input = $('<form autocomplete="off"><input id="' + titleId + '" style="width:100%;" placeholder="Select ' + $(title).text() + '" /></form>')

http://live.datatables.net/jihegivo/1/edit

kthorngren

If you are using Editor this thread may help:
https://datatables.net/forums/discussion/51634

Kevin

colin

This thread should help too.

heath22

Yeap I tried both solutions before I wrote this thread and it doesn't work for other fields.

The example Kevin posted throws an error about the Field being undefined in the test case I posted.

$.extend( true, $.fn.dataTable.Editor.Field.defaults, {
      attr: {
        autocomplete: 'off'
      }
    } );

And the solution colin posted:
$(this.api().table().container()).find('input').parent().wrap('<form>').parent().attr('autocomplete', 'off'); } });

Is basically the same thing I have in the case I posted, but when added, you can no longer filter the datatable with those selectors.:

var input = $('<form autocomplete="off"><input id="' + titleId + '" style="width:100%;" placeholder="Select ' + $(title).text() + '" /></form>')

kthorngren

The answer I posted is for the Datatables Editor inputs. It won't apply for your column search solution.

Looks like using the form option is the answer. The problem is with the .on( 'change', function () { that is chained to the appendTo(). This is looking for a change in the form not the input. A slight change is needed to apply the .on() event to the input: $('#' + titleId).on( 'change', function () {. See the updated example:
http://live.datatables.net/micekugu/2/edit

Kevin

mom

I've found a workaround, effectively disabling autocomplete on all input fields inside an Editor form, inlcuding dynamically added ones or inputs not created by Editor but part of a custom form template.

var thisEditor = new $.fn.dataTable.Editor( {
    formOptions: {
        main: {
            className: 'my-form'
        }
    },
    fields: [
        // ...your form fields and other config options
    ]
});
thisEditor.one( 'open', function() {
    $('form.my-form').attr('autocomplete','off');
});