Edited at

クロスブラウザに対応したオートコンプリート付き入力フォーム


前提条件


  • ユーザー名とパスワードのオートコンプリートではありません

  • 用語として、オートコンプリートを自動入力/自動補完/オートフィルと同じ意味で使っています

  • 2019/1/16時点の内容です

  • 検証したOSやブラウザのバージョンは一部です(IEやFirefoxは見ていない)


オートコンプリートで頭に叩き込んでおくこと


  • iOSのSafariはautocomplete属性に"nope"を指定しても自動入力は無効にできない

  • iOSのSafariはname属性で住所と推測できる項目があると連続して自動入力する

  • autocomplete属性を指定してもname属性の値によって挙動が変わる場合がある

  • autocomplete属性の指定がなければname属性に含まれる文字列で判定される

  • 自動入力を無効にしたい場合はname属性をブラウザに推測されないようユニークな値にする

  • 特に都道府県と市区以降の住所は判定が複雑になっている


成功パターン例

項目
input type
autocomplete
autocorrect
autocapitalize
name
誤判定を避けるポイント

名前
text
name

full_name

施設名
text

shop
※nameにnameを含む文字列を入れないこと

メールアドレス
email
email

電話番号
tel
tel

tel
※nameにnumberを含む文字列を入れないこと

郵便番号
number
postal-code

町名・番地
text
address-line1
off
none
home_address1

home_が必要だった

建物名・部屋番号
text

off
none
home_address2

home_が必要だった

URL
url
url

web_site_url
※nameにaddressを含む文字列を入れないこと

※都道府県と市区は試していません

※住所は並び順も影響します


iOSのSafariで起きた不思議な出来事と仕様

・autocomplete属性に無効な値("nope"など)を指定しても無視された

・建物名・部屋番号のautocomplete属性に"address-line2"を指定してもaddress-line1が入った

・住所のname属性をhome_address1とhome_address2から、address1とaddress2にすると建物名・部屋番号が空欄になった

・URLの項目のname属性をweb_site_addressにするとstreetaddressが自動入力された


Chromeで起きた不思議な出来事と仕様

・電話番号の項目のnameにnumberを含めると先頭の0や国番号が消える(数値形式になるのかも)

・氏名の項目のnameにcontactを含めると先頭の文字が消える(理由は推測できなかった)

・AndroidのChromeで電話番号の保存時に国番号が自動的に補完される場合がある

・iOSのChromeは市区町村を保存できるが、AndroidのChromeは市区町村を保存できない


まとめ

・name属性はSafariが大きな制約条件になるため、まずはSafariに合わせる

・name属性の値によってはChromeで先頭の文字列が消えるので注意する

・autocomplete属性は必須ではない


その他

・Safariにおいてinput typeに"search"を指定しても、formのaction属性を設定していない場合は「改行」が「検索」にならない