Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

前提条件

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした