Skip to content
This repository has been archived by the owner. It is now read-only.
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Feb 19, 2021
Feb 19, 2021
Mar 27, 2018
Feb 19, 2021
Feb 19, 2021

jquery.disableAutoFill

Notice: This package is abandoned, please visit disableautofill.js


The easiest solution for disabling Google Chrome auto-fill, auto-complete functions.

Document Transations: English | 繁體中文 | 简体中文

I've spent serveral hours surfing online to look for solutions in order to disable Google Chrome auto-fill, auto-complate functions such as the screenshot below.

Image

After having tried all possible solutions I can find on Stackoverflow, howerver, they are outdated and not working. Finally I figured out that Google Chrome forces dropping the submission history while a form contains type="password" field, so this plugin is to do the following steps:

  • Replace type="password" to type="text" and then replace the text with asterisks.
  • Add an attribute autocomplete="off" on form.
  • Randomize the input name value to prevent Chrome or other third-party extensions to remember what you filled.

Install

Npm

npm install disableautofill

Bower

bower install jquery.disableAutoFill

CDN

<script src="https://cdn.jsdelivr.net/npm/disableautofill/src/jquery.disableAutoFill.min.js"></script>

Demo

Check out the demo page to see how it works.

Usage

HTML

<form id="login-form">

JS

$('#login-form').disableAutoFill();

Options

option default note
passwordField - Dom Element by ID or by ClassName, if not set, disableAutoFill will automaticlly pick up the [type=password] field.
submitButton - Dom Element by ID or by ClassName, if not set, disableAutoFill will automaticlly pick up the [type=submit] button.
hidingChar Character use to hide real password value.
debugMode false If true, printing form serialized data in console log instead of submitting.
randomizeInputName true This plugin will randomize input name attribute by default. It will restore back to original field name when submitting form. This is for preventing auto completion for all browsers (includes third-party auto-completeion extensions) not just for Google Chrome.
html5FormValidate false Set this option to "true" to enable HTML 5 native form validate ( required,pattern etc...)
callback - To validate form fields or something you can do.

Example

$('#login-form').disableAutoFill({
    passwordField: '.password',
    callback: function() {
        return checkForm();
    }
});

function checkForm() {
    form = document.getElementById('login-form');
    if (form.password.value == '') {
        alert('Cannot leave Password field blank.');
        form.password.focus();
        return false;
    }
    if (form.username.value == '') {
        alert('Cannot leave User Id field blank.');
        form.username.focus();
        return false;
    }
    return true;
}

Suggestion

This plugin may not work while the javascript render speed is slow. Chrome detects the type="password" and still assign the "remember me" to the form elements.

You can modify the input type="password" to "text", and add a class (for example: ".password")

<input type="text" name="password" class="password">
$(function() {
    $('.login-form').disableAutoFill({
        passwordField: '.password'
    });
});

https://jsfiddle.net/terrylinooo/hhgzbsvy/

License

MIT

Authors

About

No description, website, or topics provided.

Resources

License

Releases

No releases published

Packages

No packages published