Google Chromeで自動入力をトリガーするにはどうすればよいですか?


191

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

回答:


182

2017年の更新: Katieからの回答は私のものよりも最新の情報を持っているようです。将来の読者:彼女の回答に賛成票を投じてください。

これは素晴らしい質問であり、ドキュメントを入手するのが驚くほど難しい質問です。実際、多くの場合、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の回答で言及された仕様のより新しいバージョンです。)

グーグルの投稿は彼らの提案された解決策を説明し続けます(投稿のコメントでの重大な批判によって満たされます)。彼らはこの目的のために新しい属性の使用を提案します:

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

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

... x-「実験的」の略で、これが標準になった場合は削除されます。詳細については投稿をお読みください。詳細を知りたい場合は、whatwg wikiで提案のより完全な説明をご覧ください。


更新: これらの洞察に満ちた 回答で指摘されているように、Chromeが一般的なフィールドを識別/認識するために使用するすべての正規表現は、にありautofill_regex_constants.cc.utf8ます。したがって、元の質問に答えるには、HTMLフィールドの名前がこれらの式と一致することを確認してください。いくつかの例は次のとおりです。

  • ファーストネーム: "first.*name|initials|fname|first$"
  • 苗字: "last.*name|lname|surname|last$|secondname|family.*name"
  • Eメール: "e.?mail"
  • 住所1): "address.*line|address1|addr1|street"
  • 郵便番号: "zip|postal|post.*code|pcode|^1z$"

3
また、「action」と「method」を含む完全な<form>タグを送信する必要があります
qualle

これはおそらく私のテストから関連していたものですが、実際に機能するのは以下で概説した方法だけです。
ミカ2013年

自動入力の正規表現定数は、それが使用する唯一のものではなく、カスタムの名前付き入力からの情報も記憶していると思います。
MetaGuru 2014

1
この回答でURLを使用しましたが、壊れていました。これが機能するようになりました:code.google.com/p/chromium/codesearch#chromium/src/components/...を
ネイサン

2
彼らは再びそれを変更するまで、ここでは、現在の一つだ:) - @Nathanはもう動作しないことを提供するURL cs.chromium.org/chromium/src/components/autofill/core/common/...
HungryBeagle

85

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

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

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

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

オートコンプリートを有効にする方法に関する重要なポイントは次のとおりです。

  • <label>すべての<input>フィールドにa を使用します
  • autocomplete<input>タグに属性追加し、このガイドを使用して入力します
  • すべてのタグでnameautocomplete属性に正しく名前を付け<input>ます
  • <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="name@example.com" required autocomplete="email">
    
    <!-- note that "emailC" will not be autocompleted -->
    <label for="frmEmailC">Confirm Email</label>
    <input type="email" name="emailC" id="frmEmailC"
    placeholder="name@example.com" required autocomplete="email">
    
    <label for="frmPhoneNumA">Phone</label>
    <input type="tel" name="phone" id="frmPhoneNumA"
    placeholder="+1-555-555-1212" required autocomplete="tel">

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

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

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

  • 名前
    • これらのいずれかを使用しますnamename fname mname lname
    • これらのいずれかを使用しますautocomplete
      • name (フルネーム用)
      • given-name (名)
      • additional-name (ミドルネーム)
      • family-name (姓用)
    • 例: <input type="text" name="fname" autocomplete="given-name">
  • Eメール
    • これらのいずれかを使用しますnameemail
    • これらのいずれかを使用しますautocompleteemail
    • 例: <input type="text" name="email" autocomplete="email">
  • 住所
    • これらのいずれかを使用しますnameaddress city region province state zip zip2 postal country
    • これらのいずれかを使用しますautocomplete
      • 1つの住所入力の場合:
        • street-address
      • 2つの住所入力の場合:
        • address-line1
        • address-line2
      • address-level1 (州または県)
      • address-level2 (市)
      • postal-code (郵便番号)
      • country
  • 電話
    • これらのいずれかを使用しますnamephone mobile country-code area-code exchange suffix ext
    • これらのいずれかを使用しますautocompletetel
  • クレジットカード
    • これらのいずれかを使用しますnameccname 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
  • ユーザー名
    • これらのいずれかを使用しますnameusername
    • これらのいずれかを使用しますautocompleteusername
  • パスワード
    • これらのいずれかを使用しますnamepassword
    • これらのいずれかを使用しますautocomplete
      • current-password (サインインフォーム用)
      • new-password (サインアップおよびパスワード変更フォーム用)

資源


39

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

例:

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

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


2
この仕様はどのブラウザに実装されていますか?まだ行われた経験/テスト?
staabm 2014年

W3C仕様の状態はオートコンプリートは、必要があることだけ含まれている onoffまたはdefault。したがって、これは無効なマークアップであり、不整合が発生しやすくなります。実際には、autocomplete属性の配置は重要ではないと思います。私はそれがすべての属性を見て、オートコンプリートがたまたまチェックする属性の1つであると思います。
Liam

1
これは正しいHTMLです。WHATWG仕様Googleの投稿をご覧ください。
AlecRust 2016


4

私は仕様をいろいろと試してみて、いくつかのフィールドを含めて、すばらしい実用例を得ました。

<!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でもテストしました。デスクトップクロムはアドレスごとにアドレスを自動入力しますが、常に一度にすべてのフィールドを埋めるようです。


1
なぜこの回答が反対票を投じるのかわかりません。上記の例は、説明されているブラウザを使用してもまだ機能します
staabm

1
上記の例に示されているオートコンプリートは、html.spec.whatwg.org
Bryan Rehbein、

2

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

http://www.chromium.org/developers/using-requestautocomplete http://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


0

これが本当の答えです:

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

だからここにあなたが必要なものがあります:

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

これ以上何もない。


私も、ラベルがクロムのオートコンプリートをトリガーできることもわかりました。
emfi 2015

だからあなたのポイントは、ラベル名はオートコンプリートフィールドを処理するときにも使用されるということですか?この答えはあまり明確ではありません
Liam、

実際、ノムはフランス人です。しかし、私はそれがラベルなしで機能するようにしました、正しい値を持つ入力のためのプレースホルダーも機能します。
AxelH 2016年


0

リンクのみの回答は、その回答の最初のリンクのように、これらのリンクがダウンすると役に立たなくなります。
bfontaine

真実ですが、それが答えがコミュニティWikiである理由です。また、コミュニティーWikiに反対票を投じても著者に影響はありません。Google独自のドキュメントを埋めるためにのみ役立ちます。コミュニティのWikiの回答はいつでも自由に更新してください。特に、リンクを更新するのと同じくらい簡単なものである場合は、どうぞよろしくお願いします。
ヘンリー

-3

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

$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.