最近のHTMLのインプット要素のテキストなどはオートコンプリート機能が効いている。
とても便利なものでブラウザによっては名前の候補を選ぶとそれに関連するメールアドレス、住所、電番号まで自動で入力してくれる。
いつも重宝して使っているものだが、受注案件でフォームを作っていれある問題にぶちあたった。
入れて欲しくないところにも自動入力
例えば「名前」という項目と、「送りたい人の名前」があるとする。
この「名前」にオートコンプリートの候補を入れると「送りたい人の名前」にも同じものが入力されてしまう。
当然これは困る。
バリデーションでもエラーにならないので確認画面に進んでしまう。
ユーザーは気づかないで送信してしまう場合もあるだろう。
なんとかしたい。
autocomplete=”off”
インプット要素にはautocompleteという属性がある。これを
autocomplete=”off”
とすることでオートコンプリートがオフになる？
やってみたがだめだった。
原因は？
色々試してみて、問題の現象が起きないようにするには入力項目の変更しかなかった。
「名前」という項目と、「送りたい人の名前」という項目がある場合、どちらかの”名前”という文字列を変更すると問題の現象は起きない。
でもそれではフォームが作れない。
どうしたいい？
autocompleteを無効にする
色々探して見るとみなさんこれで苦労されているらしい。
この方はjavascriptで無効にするようにしている。
残念ながら自分の環境ではだめだった。
次の方はダミーのインプット要素を作るやり方。
これも自分の環境ではだめだった。
自分のところの問題点をもう一度考え直す
自分のところの問題は何か？
form内のtable要素に次にように入れている。
<tr> <th>送りたい人の名前</th> </tr> <tr> <td><input type="text" name="send_name" ><?php echo $send_name;?></td> </tr> <tr> <th>自分の名前</th> </tr> <tr> <td><input type="text" name="my_name" ></td> </tr>
「送りたい人の名前」はphpで自動入力される。
「自分の名前」を入力する際にオートコンプリート で表示される候補を入れると、「送りたい人の名前」もそれに変わってしまう。
これが問題なわけだ。
おもしろい事に「送りたい人の名前」、この文字列を「送りたい人の」に変える。
つまり”名前”という文字列を削除する。
こうするとこの現象は起きない。
ブラウザはchrome。
th要素の文字列から関連するインプットだと判断出来ているみたいだ。
解決策
chromeがth要素の文字列から関連するインプットだと判断しているなら、ダミーのth要素をつくればいいのではないか。
こうしてみた。
<tr> <th>送りたい人の名前</th> </tr> <tr> <th>ダミー</th> </tr> <tr> <td><input type="text" name="send_name" ><?php echo $send_name;?></td> </tr> <tr> <th>自分の名前</th> </tr> <tr> <td><input type="text" name="my_name" ></td> </tr>
「自分の名前」に関連する「送りたい人の名前」にはインプット要素がない状態にした。
「ダミー」のところはtrごとdisplay:noneにしているので見た目上は
・「送りたい人の名前」
・インプット
・「自分の名前」
・インプット
となっている。
これで「自分の名前」でオートコンプリートの候補を選択しても「送りたい人の名前」は影響されなくなった。
やっと解決。