自動入力を阻止したいのに、autocomplete="off"が効かない

なぜ自動入力が起こるのか

自動入力はブラウザがinput要素の属性を認識し、その値がブラウザに保存済みの情報と何らかの関連があると判断した場合に発生します。

例：
input要素のname属性に"mail"等メールに関連する単語が含まれる場合、メールアドレスの入力欄として認識される。
または、type属性がpasswordとなっている場合、パスワードの入力欄として認識される。
etc.

対処法として最初に検索結果に上がってくるのは、input要素についてautocomplete="off"と記載する方法ですが、効果がない場合が多いようです。

今回は自動入力の原因となっている要素を画面ロード時、一時的に変更することで自動入力を阻止するコードをjQueryで実装します。

処理の流れ

1. 初期表示の段階では、ブラウザに認識されないような属性を設定しておく（例：メールアドレスの入力欄のname属性に"mail"という単語を含まない）
2. mousedownイベントで本来の属性に変更し、自動入力を誘発
3. setTimeout()でタイムアウトさせる

以下のようなHTMLを想定します。

<!-- nameにメールを連想させる単語を記載しない -->
<tr>メールアドレス</tr>
<td><input type="text" name="e"></></td>

<!-- type="password"としない、かつnameにパスワードを連想させる単語を記載しない -->
<tr>パスワード</tr>
<td><input type="text" name="p"></></td>

それぞれの入力欄について、以下のようなコードを記載します。

// メールアドレス入力欄
let email = $('input[name="e"]');

email.on('mousedown', function() {
    email.attr('name', 'email');
    setTimeout(function() {
        email.focus();
    }, 1);
})

// ブラウザによっては範囲選択が効かなくなってしまうことがありますが、その場合は以下を追加してください
email.css('user-select', 'text');

// パスワード入力欄
let password = $('input[name="p"]');

password.on('mousedown', function() {
    password.attr('type', 'password');
    setTimeout(function() {
        password.focus();
    }, 1);
})


// ブラウザによっては範囲選択が効かなくなってしまうことがありますが、その場合は以下を追加してください
password.css('user-select', 'text');

上記は、すでに保存されているパスワードを黒丸で表示したい場合は使えないので(初期表示がtype="password"ではないため)、実際には値があるかどうかで場合分けします。

if (email.val()) {
    email.attr('name', 'email');
} else {
    email.on('mousedown', function() {
        email.attr('name', 'email');
        setTimeout(function() {
            email.focus();
        }, 1);
    })
}

if (password.val()) {
    password.attr('type', 'password');
} else {
    password.on('mousedown', function() {
        password.attr('type', 'password');
        setTimeout(function() {
            password.focus();
        }, 1);
    })
}

今回紹介した方法は、以下の記事を組み合わせて考案しました。
ロードされた段階で自動入力が発生していることが前提となるので、もしmousedownイベントと共に自動入力が発生する場合は、こちらの記事を参照してみてください。