This plugin is the easiest solution for disabling Google Chrome auto-fill, auto-complete functions.

Forms Plugins

Documentation

jquery.disableAutoFill

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

bower install jquery.disableAutoFill 
<script src="/[your_bower_path]/jquery.disableAutoFill/src/jquery.disableAutoFill.min.js"></script> 

or

<script src="https://terrylinooo.github.io/jquery.disableAutoFill/assets/js/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


You May Also Like