ブログ

ブラウザのautocomplete機能
2020.08.20

PHPでHTMLを出力する処理を製作していた際、ある並びのname属性を持つ<input type=”hidden” />タグのvalue属性の値が、生成したHTMLと異なっていて、翻弄された話です。

javascriptで動的にvalue属性の値を調べてみると、HTMLの読み込み後に動的に書き換えられていることが分かりました。
そのときに使用していたブラウザはFirefoxの最新版(ver79)です。

この機能は、入力者の補助をしてくれる大変ありがたい機能で、入力フォームを製作する立場からも、機能を邪魔しないように特段の制限は加えておりませんでした。

しかし、今回は、入力内容が目に見えにくい<input type=”hidden” />にも適用される場合があることを認識できていなかったことで、原因判明に時間がかかってしまいました（涙）。

具体的には、次のようなHTMLタグで動的な補正が発生しました。

補正前

補正後

HTMLの仕様を確認しても、具体的なルールについて細かな記載がないようですが、name属性の値「test1」～「test3」という右端の数字の増加に基づいて、そのvalue属性の値を補正してしまっているようでした。

ちなみに、Firefoxでは、name属性の値を「test3」～「test1」の順に減らしたり、value属性を値なしにしておくと補正は働きませんでした。

なお、autocomplete機能は、各モダンブラウザで実装されておりますので、同様の現象の発生は、Firefoxに限らないと思います。

<input type=”hidden” />に「autocomplete=”off”」属性を記述しておきます。

この対処方法であれば、type属性が「hidden」以外の補正は従来通り働きますし、目に見えにくいものだけに適用できます。

<input type=”hidden” />は、どうしても必要な場合がありますので、この対処方法が現実的で安心だと考えています。

以上、お役に立てれば幸いです。