経緯
オートコンプリートを発動させたくないフォームで、勝手にChromeがクレジットカード入力欄と勘違いしてクレジットカードのオートコンプリートを働かせ、さらに勝手にSSLじゃないから安全じゃないよってウインドウ出してきた。やめてほしかったので無効にしようとした。
ただ、この記事にかいてあるように一筋縄じゃいかず、ダミーインプットもクレジットカード入力欄には意味がなかった。
しかたなくSSLに対応したが今度はクレジットカード選択プルダウンが出てきてしまって邪魔だったので、どうにか消せないかといろいろやってみて出来たので書く。
方法
オートコンプリートしてほしくないinputタグに以下のようにautocomplete="address-line3"の属性をつける。
<input autocomplete="address-line3">
※Chromeでしか確認してないのでChrome以外のブラウザでの動作は保証しない
説明
まず前提としてautocomplete="off"はほとんどのブラウザで無視される。「自動入力あったらいちいち思い出さなくていいから複雑なパスワードが設定できてセキュリティ面でよろしい」ということらしい。それはそうかもしれないがサイト側の設定を無視する必要なくない？
ぐぐったらautocomplete="nope"みたいに無効な値を設定する方法がたくさん出てきた。autocompleteはなんの項目として自動入力させるかを設定できて、無効な値を設定するとオートコンプリートが発動しないということらしい。だが、今のChromeでは無効な値を入れたautocompleteは無視されてるのでこれは駄目。
他に、パスワードの自動入力を無効にする方法として、見えないinputを作ってautocomplete="password"とすると、Chromeがどこにパスワードを入れていいか判らずオートコンプリートが発動しなくなるというのがあるらしい。inputを見えなくする方法としてdisableを設定するとオートコンプリート検知に無視させるのでstyle属性で透明にするとか書いてあって、いたちごっこ感がある。
これは良さそうと思ったが、クレジットカードの入力欄に関しては複数あっても全部に反応するらしく、複数のautocomplete="cc-number"があっても全部にオートコンプリートが反応してしまう。なのでこれも駄目。
autocompleteに無効な値ではなく、ほぼ使わない項目を設定すればオートコンプリートが発動しても入力はされないんじゃないかと考えた。autocompleteに指定できる値の一覧とにらめっこして、いろんな値を入れてみた。emailなどのよく使う項目は、
<input value="0" autocomplete="email">
のように初期値が設定されていればオートコンプリートはされないが、初期値を消して空になると選択プルダウンが出てしまう。
<input type="number" autocomplete="email">
のように入力を限定すると値は入力されないし、選択プルダウンで選んでも入力はされなくなるが、そもそもプルダウン自体を出したくない。
よく使わなさそうなfaxとかhonorific-prefixとかは、そもそもChromeが対応してなくて無効な値と判定されてしまう。なので、「対応はされているが、値があまり入力されない項目」を一覧から探す地道な作業を行った。
その結果address-line3は「対応はされているが、Chromeではオートコンプリートされる値を持たない項目」だとわかった。
address-line1とaddress-line2では番地が入力されるが、なぜかaddress-line3ではなにも入力されないしプルダウンも出てこない。Chromeの自動入力設定ですべての項目の設定を行ったがオートコンプリートされなかった。
これが国や地域による住所表記の差なのか、自分が入力したことがなかっただけなのか、Chromeの対応が遅れてるだけなのかは判らない。これを見つけるために俺が休日を1日溶かしたことだけが判っている。
最後に
多分この方法もChromeがきちんとautocompleteの値に対応していけば修正されると思うので、その場しのぎにしかならないと思う。
自動化に幸あれ。