disableautofill.js

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

This library does the following steps:

• Replace type="password" with type="text". [1]
• Replace the text of password with asterisk symbols.
• Add an attribute autocomplete="off" on form.
• Randomize the attribute name in order to prevent Google Chrome to remember what you filled.

Note:

[1] It is recommended to use type="text" directly, or it might not work depends on browser's version and page rendering speed.

Install

NPM

npm install disableautofill

Bower

bower install terrylinooo/disableautofill.js

CDN

# Pure JS, without jQuery
https://cdn.jsdelivr.net/npm/[email protected]/dist/disableautofill.min.js

# jQuery plugin.
https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.disableautofill.min.js

Usage

HTML

<form id="login-form">
    ...
</form>

JS

var daf = new disableautofill({
    'form': '#login-form',
    // settings...
});

daf.init();

Or, if you like to use jQuery plugin.

$('#login-form').disableAutoFill({
    // settings...
});

Options

Examples

This example form presents the main functionality of disableautofill.js A HTML form and a JavaScript function that is a form validator.

<form id="testForm" method="get" action="/">
    <div class="input-group">
        <label>Username</label>
        <input type="text" name="username">
    </div>
    <div class="input-group">
        <label>Password</label>
        <input type="text" name="password" class="test-pass">
    </div>
    <div class="input-group">
        <label>Confirm password</label>
        <input type="text" name="confirm_password" class="test-pass2">
    </div>
    <div class="button-section">
        <button type="submit">Submit</button>
    </div>
</form>
<script>

/**
 * Callback function is usually a form validator.
 *
 * @return bool
 */
function checkForm() {
    form = document.getElementById('login-form');
    if (form.password.value == '' || form.confirm_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;
}
</script>

JS

 var daf = new disableautofill({
    'form': '#testForm',
    'fields': [
        '.test-pass',  // password
        '.test-pass2'  // confirm password
    ],
    'debug': true,
    'callback': function() {
        return checkForm();
    }
});

daf.init();

jQuery

$('#test-form').disableAutoFill({
    'fields': [
        '.test-pass', // password
        '.test-pass2' // confirm password
    ],
    'debug': true
    'callback': function() {
        return checkForm();
    }
});

Development

If you would like to contribute code to this project.

# Clone project.
git clone [email protected]:terrylinooo/jquery.disableAutoFill.git your-branch-name

# Get into the `your-branch-name` directory, run:
npm install

# Run a develpment web server, listen to port: `8000`
npm run start

Test pages

http://127.0.0.1:8000

# This page is for jQuery plugin.
http://127.0.0.1:8000/jquery

A test page will be showed and you can modify the code and see the results in real time.

The Debugging messages will be showed in the development console.

License

MIT

Authors

disableautofill.js is brought to you by Terry Lin from Taiwan.