Chromeでオートコンプリートを阻止する方法について

Question

ログイン画面を作っています。

【仕様】
①ログインID と パスワード を入力し、ログインボタンを押下するとログイン処理を実行する
②ログイン処理の結果、ログインIDとパスワードが正しかったら、クッキーに ログインID と パスワードを保存し、画面遷移する
③次回ログイン画面を表示したとき、クッキーが保存されていれば、自動的にログインIDとパスワードを入力する

こんな仕様のログイン画面を作っていたのですが問題が発生しました。

##問題発生
他のサイト(phpPgAdmin) にログインIDとパスワードを入れて、ブラウザが パスワードを保存しますか？とたずねてきたときに 保存 する と、
自作のログイン画面のログインID および パスワードに、他のサイトで入れたログインIDとパスワードが自動で入ってしまっています。

##環境
・他のサイト(phpPgAdmin) と、 自作のログイン画面は同じホスト名（＋ドメイン名）です。
例)
http://watashino.saito.jp/phpPgAdmin/
http://watashino.saito.jp/web/login.html

##検証
・他のサイト(phpPgAdmin) のログイン入力欄のidやnameは自作のログイン画面のそれと被っていません
・自作のログイン画面の form タグ および、input タグ に autocomplete="off" を記してみましたが、だめでした
・仕様の③で、前回ログインしたときのログインIDとパスワードをJavaScriptにより自動入力するのですが、このクッキーが無い場合は初期値が"" なのですが、これだと ブラウザが勝手に他のサイトのログイン情報で内容を上書きしてしまうようです。
初期値に"" か、空白(" ")以外を設定すると、ブラウザが上書きしないようです。

つまり、"" で JavaScriptで上書きは通用しなかったです･･･

そのときのコードです。(jQueryを利用しています)

jQuery(function ($) {
	// ==================
	// ログイン情報オート入力
	// ==================
	var log = getCookie(COOKIE_LOGIN);	// ログイン情報のクッキー取得
	if (log == "") {
		// ログイン情報のクッキーがない時
		$("#login_id").val("");     // 入力欄には 他サイトのIDが表示される (NG)
		$("#login_id").val(" ");    // 入力欄には 他サイトのIDが表示される (NG)
		$("#login_id").val("123");  // 入力欄には 123が表示される (OK)
		$("#passwd").val("1234"); 
	} else {
		// ログイン情報のクッキーから入力欄に自動入力
		var bf         = new Blowfish(BLOWFISH);
		var plaintext  = bf.decrypt64(log); // 復号化
		var log        = plaintext.split(DIVIDE_CHAR);
		$("#login_id").val(log[0]);
		$("#passwd")  .val(log[1]);
	}
}

##質問
ブラウザ(Chrome)が自動入力したあとにJavaScriptを実行させて、ログインの入力ボックスを""で上書きしてしまえばいいのではないかと考えますが、どうしたらいいのでしょうか？

または、自動入力させないなにか方法はありますか？

以上よろしくお願い致します。

##参考
サイボウズエンジニアのブログに興味深い記事がありました
http://blog.cybozu.io/entry/7452

Answer 1

自己解決しました。
Chromeが入力ボックスを変更したときに onChange イベントが発生していました。
なので、

「ログイン入力ボックスのチェンジイベントを監視し、イベントが発生したら中身を""で上書きする」

処理を追加しました。
ただし、”ブラウザが勝手にいれた”ときのみ実行したいので
（他のサイトのログイン入力情報をクリアしてもちゃんと動作するように）

・入力ボックスでキー入力があった場合は監視フラグを下ろす
・ログイン情報クッキーがあった場合はフラグを下ろす
・ブラウザが勝手にいれたときいちどきりでフラグを下ろす

処理を追加しました。（はぁ。）

	// ==================
	// ログイン情報オート入力
	// ==================
	var change_monitor_f = true;	// ログイン入力ボックスに変更があった場合、中身を消すフラグ
	var log = getCookie(COOKIE_LOGIN);		 // ログイン情報のクッキー取得
	if (log != "") {
		change_monitor_f = false;			 // ログイン情報のクッキーがあるので、フラグ無効
		var bf           = new Blowfish(BLOWFISH);
		var plaintext    = bf.decrypt64(log); // 復号化
		var log          = plaintext.split(DIVIDE_CHAR);
		$("#login_id").val(log[0]);
		$("#passwd")  .val(log[1]);
	}
	$("#login_id").on("change", function(){
		if (!change_monitor_f) return false; // 監視フラグ無効時は処理しない
		var log = getCookie(COOKIE_LOGIN);	 // ログイン情報のクッキー取得
		if (log == "") {
			change_monitor_f = false;		 // いちどきりなので フラグ無効
			$("#login_id").val("");
			$("#passwd")  .val("");
		}
	});
	// ==================
	// キー入力監視
	// keyclass は、ログインIDまたはパスワード入力ボックスに付けとく
	// ==================
	$(".keyclass").keypress( function ( e ) {
		change_monitor_f = false;  // 監視フラグ無効
	} );

もちろんもっとスマートな方法、そもそも無効にできる方法はまだまだ募集！