25

一部のフォームでは、Chromeのオートフィルはクレジットカードのオートフィルでプロンプトを表示します。

編集：スクリーンショットを追加します。これは、ブラウザのオートコンプリートと同じではありません。以前に同じフォームに値を入力する必要はありません。

スクリーンショット

ブラウザがこれらをクレジットカードフィールドとして検出し、この動作をトリガーするように、HTMLフォームをどのように作成する必要がありますか？

Stripeフォームで動作する例が理想的です。

4

5 に答える 5

16

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

<input>正しく名前を付けるだけで、どのフィールドがクレジットカード情報用であるかをブラウザに伝えることができるようになりました。

次の答えは、ここからの私の元の答えからのものです：https ://stackoverflow.com/a/41965106/1696153

オートコンプリートを有効にするための公式の現在のWHATWGHTML標準へのリンクは次のとおりです。

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

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

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

  • <label>すべての<input>フィールドにを使用します
  • autocomplete<input>タグに属性を追加し、このガイドを使用して入力します。
  • すべてのタグの属性に正しく名前nameを付けますautocomplete<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>！この情報はここにもあります。

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

  • 名前
    • これらのいずれかを使用してくださいname：name fname mname lname
    • これらのいずれかを使用してくださいautocomplete：
      • name（フルネームの場合）
      • given-name（名の場合）
      • additional-name（ミドルネームの場合）
      • family-name（姓の場合）
    • 例：<input type="text" name="fname" autocomplete="given-name">
  • Eメール
    • これらのいずれかを使用してください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（サインアップおよびパスワード変更フォーム用）

資力

于 2017-01-31T18:48:44.103 に答える
15

この回答https://stackoverflow.com/a/9795126/292060から、Chromeがフィールド名の正規表現パターンに一致しているか、フォームが次のようにx-autocompletetype属性を明示的に使用しているようです（この例では「somename」を使用しています）名前に一致する問題が混在しないようにするため）：

<input type="text" name="somename" x-autocompletetype="cc-number" />

実際には、一致する名前とx-autocompletetypeの両方を選択できます。

<input type="text" name="ccnum" x-autocompletetype="cc-number" />

スクリーンショットに入力ボックスのビューソースがありますか？これは、名前またはx-autocompletetype属性で一致するかどうかを示します。

私がリンクした回答には、詳細情報へのリンクがいくつかあります。ここでは繰り返しませんでした。

他のいくつかのコメント：

Chromeがクレジットカード情報を保存するかどうかの質問をポップすることは知っていますが（私はしません）、それがどのように検出されたかに関係なく、Chromeがその質問をポップしているかどうかはわかりません。つまり、Chromeがクレジットカードの個別のフィールドを他のフィールドと一緒にオートコンプリートするのか、それともすべてをクレジットカードとして保存する必要があるのか​​はわかりません。

あなたの質問は、それを行うかどうかではなく、それをどのように行うかでした。しかし、あなたの質問のコメントから、私はあなたがクレジットカードのフィールドをオートコンプリートしたくないかもしれないことに同意します。個人的には、ブラウザでローカルであることを知っていても、それが発生すると戸惑うことになります（特に、CVVについてこのように感じ、報告すると驚くほどの抵抗があります）。ただし、顧客がそれを使用したいときにイライラする投稿があり、Chromeにクレジットカードが設定されていて、Webサイトがそれをブロックしています。

于 2013-03-03T01:24:07.383 に答える
11

正解を教えてくれてありがとう@goodeye。

クレジットカードの自動入力をトリガーするには、

  1. フォームでSSLを有効にする必要があります
  2. SSLが有効になっている場合、標準のクレジットカードフィールド名のほとんどのバリエーションが機能するはずです。

Chromeが検出をトリガーするために使用する正規表現へのリンクは次のとおりです

于 2013-03-06T22:19:47.740 に答える
2

Chromeはautocomplete、自動入力の入力で属性を使用しています。これは、まだ使用されていない場合でも、将来的に他のブラウザで使用される可能性があります。 autocompleteの実際の使用法は、を指定してオートコンプリートが有効になっているかどうかを示すことautocomplete="off"です。しかし、クロムはオートフィルに同じものを使用します。

オートフィルとオートコンプリートは異なるため、混乱しないでください。

自動入力は、Chromeブラウザの自動入力設定に保存されているものからフォームに入力するためにChromeが使用するものです。

オートコンプリートは、すべてのブラウザが、入力時に値を提案することにより、同じフォームに以前に入力した内容を記憶するために使用するものです。したがってautocomplete="off"、入力で使用すると、ブラウザはこれらの値の提案を停止します。

ソリューションに戻って、オートフィルを機能させるにはcc-number、カード番号、cc-nameカード所有者名、cc-csccvc、および属性cc-expのカードの有効期限を使用しますautocomplete。クロムオートフィルと互換性のあるサンプルは次のとおりです。

<div>
    <label for="frmNameCC">Name on card</label>
    <input name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name">
</div>
<div>
    <label for="frmCCNum">Card Number</label>
    <input name="cardnumber" id="frmCCNum" required autocomplete="cc-number">
</div>
<div>
    <label for="frmCCCVC">CVC</label>
    <input name="cvc" id="frmCCCVC" required autocomplete="cc-csc">
</div>
<div>
    <label for="frmCCExp">Expiry</label>
    <input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp">
</div>

現在Chromeブラウザにクレジットカードを保存している場合は、Run code snippet上のボタンをクリックしてみてください。Chromeのオートフィルが実際に動作しているのを確認できます。

ソース：https ：//developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

于 2018-07-30T13:45:40.540 に答える
1

Chromeはプレースホルダーもスキャンします。

例：<input placeholder='dd-mm-yyyy'/>クレジットカードフィールドになるようにトリガーします。

于 2018-08-23T08:22:24.227 に答える