システム開発/HTMLのフォーム入力でオートコンプリート機能を無効に設定

最近ではJQueryなどのAjaxライブラリを使って

簡単にフォームの入力値をチェックする処理を行っていると思います。

とても便利で、最近では積極的にシステムに導入しています。

リアルタイムにフォームの入力値を確認して

自動計算させたり、該当するデータを取得したりと活躍しています。

が

ある時、クライアント様から意外な使い方で

不具合の報告を受けた事があります。

そう！オートコンプリートで選択した場合、処理がされない！

確認して、何とか対応（キーボードイベントにて）したんですが

それでもやっぱり直っていないと報告を頂き・・・


入力手順を確認すると

どうやら

オートコンプリートで表示されている値を

マウスでクリックして選択していたのです。

手順がわかったので、その解決方法をいろいろテストしてみたのですが

結局どのイベントを取得すればいいのやら


で

最終的に
フォーム全体でオートコンプリート機能を無効にする方法を選び対応しました。

若干、強引でもありますが

操作手順を一本化する意味では正解ではないだと思います。


■オートコンプリート機能を無効（一括：フォーム全体）

<form method=”post” action=”test.php” autocomplete=”off”>


■オートコンプリート機能を無効（個別）

<input type=”text” name=”test” value=”” autocomplete=”off”>