LoginSignup
7

More than 3 years have passed since last update.

posted at

updated 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属性を設定していない場合は「改行」が「検索」にならない

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
7