15
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-01-17

##前提条件

  • ユーザー名とパスワードのオートコンプリートではありません
  • 用語として、オートコンプリートを自動入力/自動補完/オートフィルと同じ意味で使っています
  • 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属性を設定していない場合は「改行」が「検索」にならない

15
9
0

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
  3. You can use dark theme
What you can do with signing up
15
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?