ログイン時にブラウザが覚えているID,パスワードを入力させない方法

ブラウザはログインが必要なサイトで、ID,パスワードを覚えていてくれて、使う際にはすごいありがたいんだけど、どうしても自動で入力をさせずに、手動で入力させたいって場合があった。

具体的にはあまり書けないが、Web上だけで完結するのではなく、Webと連動して対面でサービスを行うキャンペーン時に、ID,パスワードが必要になるため、どうしても対面前に一度、手入力して自分のパスワードを思い出しておいてほしい、という状況。

最初に考えたのはinputのnameを変えるという方法。
これは機能しなかった。nameを変えてもなぜかブラウザが覚えているID,パスワードが入力されてしまう。

次に考えたのは、Javascriptでinputのvalueを空にする方法
windowのload時にvalueを空にする処理をしたが、ブラウザが自動入力するのはその後のタイミングらしく、一旦空にした後に、valueがはいってしまった。

次に考えたのが、setIntervalとかで、定期的にinputの値を空にする方法。
IDのinputにフォーカスされたタイミングでsetIntervalを解除する。
これは一応うまく動作していたが、iPhoneやAndroid、IEなどブラウザによってはinputのフォーカスイベントがうまく動作しない可能性もあるのでは…と考え、そうなってしまったら、どれだけ手動で入力しても定期的に値を空にされてはたまらんと思いやめた。

最終的にとった方法は
name="id"のinputなどの他にname="id-2"、name="password-2"などのinputを作り、それを見えないように設置するという方法。
これをやると似た名前のどちらかにしか値が入らなくなった。
ただ、先に（または後に）記述されている方のinputに…とかではなく、ブラウザによってはidは先に書かれたinputに、パスワードは後に書かれたinputに…となってしまっていた。
複数のブラウザで試行錯誤して順番を変え、正しいinputには値が入らない順番を探した。
どういった法則があるのかはわからずじまい。

cssでdisplay:noneにしてしまうとブラウザがそのinputを無視してしまうようで、height: 0; width:0; position: absolute; top: 0; right: 0;などとして、見た目上は見つからないようにして対応した。