web-dev-qa-db-ja.com

Google Chromeで自動入力をトリガーする方法

特定のフォームでChrome自動入力機能を有効にする特別なマークアップがあるかどうかを知りたいです。私はそれを無効にする方法についての質問を見つけましたが、ブラウザに「これはアドレスの入力です」または「これは郵便番号です」と伝えるために、HTMLコードに何らかのマークアップを追加できるかどうかを知りたいフィールド」に正しく入力してください（ユーザーがこの機能を有効にしたと仮定）。

htmlgoogle-chromeautofill
178
Riesling

2017年の更新：ケイティからの答えは私のものよりも最新の情報を持っているように見えます。将来の読者： 彼女の答え 。に投票してください

これは素晴らしい質問であり、ドキュメンテーションを入手するのが驚くほど難しい質問です。実際、多くの場合、Chrome自動入力機能は「機能する」ことがわかります。たとえば、次のhtmlスニペットは、少なくとも私にとっては（Chrome v。18）、最初のフィールドをクリックすると自動的に入力されるフォームを生成します。

<!DOCTYPE html>
<html>
<body>    
<form method="post">
  First name:<input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  E-mail: <input type="text" name="email" /><br />
  Phone: <input type="text" name="phone" /><br />
  Address: <input type="text" name="address" /><br />
</form>
</body>
</html>

ただし、この答えは「魔法」の領域にソリューションを残すため、満足のいくものではありません。さらに掘り下げるChrome（およびその他の自動入力対応ブラウザ）は、主にコンテキスト要素に基づいてフォーム要素に入力するデータのタイプを決定することを学びました。このようなコンテキストの手がかりの例には、入力要素のname、要素を囲むテキスト、およびプレースホルダーテキストが含まれます。

ただし、最近、Chromeチームは、これが不十分なソリューションであることを認め、この問題の標準化を迫っています。 非常に有益な投稿 Google Webmastersグループの最近の問題について議論し、説明しました：

残念ながら、これまで、ウェブマスターがChromeおよび他のフォーム入力プロバイダーがフォームを正しく解析できるようにすることは困難でした。いくつかの標準が存在します。しかし、彼らはウェブサイトの実装に面倒な負担をかけるため、実際にはあまり使用されません。

（彼らが参照する「標準」は 仕様のより新しいバージョン 上記のAvalanchisの回答で言及されています。）

Googleの投稿では、提案された解決策について説明しています（投稿のコメントで大きな批判が寄せられています）。彼らは、この目的のために新しい属性の使用を提案しています：

Input要素に属性を追加するだけです。たとえば、メールアドレスフィールドは次のようになります。

<input type=”text” name=”field1” x-autocompletetype=”email” />

...ここでx-は「実験的」の略で、これが標準になったときに削除されます。詳細については 投稿 を読んでください。または、さらに掘り下げたい場合は、提案のより完全な説明があります whatwg wikiで 。

UPDATE：これらで指摘されているように 洞察力answers 、すべての正規表現Chromeは、共通フィールドの識別/認識に使用されます autofill_regex_constants.cc.utf8 にあります。したがって、元の質問に答えるには、htmlフィールドの名前がこれらの式と一致することを確認してください。以下に例を示します。

  • 名："first.*name|initials|fname|first$"
  • 姓："last.*name|lname|surname|last$|secondname|family.*name"
  • email："e.?mail"
  • アドレス（1行目）："address.*line|address1|addr1|street"
  • zipcode："Zip|postal|post.*code|pcode|^1z$"
175
kmote

この質問はかなり古いですが、更新された回答！

オートコンプリートを有効にするためのWHATWGドキュメントへのリンクです

Googleは、モバイルデバイスに適したWebアプリケーションを開発するための かなりいいガイド を作成しました。自動入力を簡単に使用できるように、フォームの入力に名前を付ける方法に関するセクションがあります。それはモバイル用に書かれていますが、これはデスクトップとモバイルの両方に適用されます！

HTMLフォームでオートコンプリートを有効にする方法

オートコンプリートを有効にする方法に関する重要なポイントを次に示します。

  • すべての<label>フィールドに<input>を使用
  • autocomplete属性を追加を<input>タグに追加し、これを使用して入力します guide 。
  • すべての<input>タグのnameおよびautocomplete属性に正しく名前を付けてください

  • 例：

    <label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
placeholder="Full name" required autocomplete="name">

<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
placeholder="[email protected]" required autocomplete="email">

<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="[email protected]" required autocomplete="email">

<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel">

<input>タグに名前を付ける方法

オートコンプリートをトリガーするには、<input>タグのnameおよびautocomplete属性に正しく名前を付けてください。これにより、フォームのオートコンプリートが自動的に許可されます。必ず<label>！も用意してください！この情報は here にもあります。

入力に名前を付ける方法は次のとおりです。

  • 名前
    • nameには次のいずれかを使用します：name fname mname lname
    • autocomplete：にはこれらのいずれかを使用します
      • name（フルネーム）
      • given-name（名）
      • additional-name（ミドルネーム用）
      • family-name（姓）
    • 例：<input type="text" name="fname" autocomplete="given-name">
  • メール
    • nameには次のいずれかを使用します：email
    • autocompleteには次のいずれかを使用します：email
    • 例：<input type="text" name="email" autocomplete="email">
  • アドレス
    • nameには次のいずれかを使用します：address city region province state Zip zip2 postal country
    • autocomplete：にはこれらのいずれかを使用します
      • 1つの住所入力の場合：
        • street-address
      • 2つの住所入力の場合：
        • address-line1
        • address-line2
      • address-level1（州または県）
      • address-level2（都市）
      • postal-code（郵便番号）
      • country
  • 電話番号
    • nameには次のいずれかを使用します：phone mobile country-code area-code exchange suffix ext
    • autocompleteには次のいずれかを使用します：tel
  • クレジットカード
    • nameには次のいずれかを使用します：ccname cardnumber cvc ccmonth ccyear exp-date card-type
    • autocomplete：にはこれらのいずれかを使用します
      • cc-name
      • cc-number
      • cc-csc
      • cc-exp-month
      • cc-exp-year
      • cc-exp
      • cc-type
  • ユーザー名
    • nameには次のいずれかを使用します：username
    • autocompleteには次のいずれかを使用します：username
  • パスワード
    • nameには次のいずれかを使用します：password
    • autocomplete：にはこれらのいずれかを使用します
      • current-password（サインインフォーム用）
      • new-password（サインアップおよびパスワード変更フォーム用）

資源

66
Katie

私のテストでは、x-autocompleteタグは何もしません。代わりに、入力タグでautocompleteタグを使用し、ここでHTML仕様に従って値を設定します http://www.whatwg.org/specs/web-apps/current-work/multipage/association -of-controls-and-forms.html＃autofill-field 。

例：

<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>

親フォームタグには、autocomplete = "on"およびmethod = "POST"が必要です。

38
Micah

ブラウザが要素を自動入力できるように、要素に適切な名前を付ける必要があります。

これに関するIETF仕様は次のとおりです。

http://www.ietf.org/rfc/rfc3106.txt1

5
Avalanchis

私はちょうどこの仕様で遊んで、ニースの実例を得ました-さらにいくつかのフィールドを含みます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <form autocomplete="on" method="POST">

    <fieldset>
        <legend>Ship the blue gift to...</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="section-blue shipping given-name" type="text"  required>
            </label>
      </p>
        <p>
            <label> Lastname:
<input name="fname" autocomplete="section-blue shipping family-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Address: <input name=ba
                autocomplete="section-blue shipping street-address">
            </label>


      </p>
        <p>
            <label> City: <input name=bc
                autocomplete="section-blue shipping address-level2">
            </label>

      </p>
        <p>
            <label> Postal Code: <input name=bp
                autocomplete="section-blue shipping postal-code">
            </label>
      </p>

    </fieldset>
    <fieldset>
        <legend>Ship the red gift to...</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="section-red shipping given-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Lastname:
<input name="fname" autocomplete="section-red shipping family-name" type="text" required>
            </label>
      </p>
        <p>
            <label> Address: <input name=ra
                autocomplete="section-red shipping street-address">
            </label>
      </p>


        <p>
            <label> City: <input name=bc
                autocomplete="section-red shipping address-level2">
            </label>

      </p>

        <p>
            <label> Postal Code: <input name=rp
                autocomplete="section-red shipping postal-code">
            </label>
      </p>

    </fieldset>

        <fieldset>
        <legend>payment address</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="billing given-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Lastname:
<input name="fname" autocomplete="billing family-name" type="text" required>
            </label>
      </p>
        <p>
            <label> Address: <input name=ra
                autocomplete="billing street-address">
            </label>
      </p>


        <p>
            <label> City: <input name=bc
                autocomplete="billing address-level2">
            </label>

      </p>

        <p>
            <label> Postal Code: <input name=rp
                autocomplete="billing postal-code">
            </label>
      </p>

    </fieldset>
    <input type="submit" />
</form>

</body>
</html>

JSBIN

2つの個別の住所領域が含まれ、住所タイプも異なります。 iOS 8.1.0でもテストしましたが、デスクトップchromeはアドレスごとに自動入力するのに対し、常にすべてのフィールドを一度に入力するようです。

3
staabm

この自動入力機能をより詳細に制御できるようです。Chrome Canaryに新しい実験的なAPIが追加されました。これは、ユーザーに要求した後にデータにアクセスするために使用できます。

http://www.chromium.org/developers/using-requestautocompletehttp://blog.alexmaccaw.com/requestautocomplete

グーグルによる新しい情報：

http://googlewebmastercentral.blogspot.de/2015/03/helping-users-fill-out-online-forms.html

https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs#use-metadata-to-enable-auto-complete

2
Riesling

Googleオートフィルの「名前」の新しいリストは次のとおりです。許可されている言語でサポートされているすべての名前があります。

autofill_regex_constants.cc

0
Alvargon

これが本当の答えです。

唯一の違いは、ラベル自体にあります。 「Nom」はポルトガル語の「Name」または「Nome」に由来します。

必要なものは次のとおりです。

  • フォームラッパー。
  • <label for="id_of_field">Name</label>
  • <input id="id_of_field"></input>

これ以上何もない。

0
Totty.js

私の場合、$('#EmailAddress').attr('autocomplete', 'off');は機能しません。しかし、次はjQueryによるchromeバージョン67で動作します。

$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');
0
reza.cse08

Googleは現在、これに関するドキュメントを提供しています。

自動入力でユーザーのチェックアウトを高速化| Web | Google Developers

そして

すばらしいフォームの作成：メタデータを使用してオートコンプリートを有効にする| Web | Google Developers

0
henry