Disable Chrome autofill in text inputs

Disable Chrome autofill in text inputs

heath22heath22 Posts: 17Questions: 5Answers: 0
edited November 2019 in Free community support

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

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

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

    Kevin

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    This thread should help too.

  • heath22heath22 Posts: 17Questions: 5Answers: 0

    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>')

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    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

  • mommom Posts: 14Questions: 4Answers: 0

    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');
    });
    
This discussion has been closed.