web-dev-qa-db-ja.com

Chromeはクレジットカードのフィールドをどのように検出しますか？

一部のフォームでは、Chromeクレジットカードの自動入力による自動入力プロンプトが表示されます。

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

Screenshot

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

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

formsgoogle-chromestripe-payments
19
T C

この回答から https://stackoverflow.com/a/9795126/29206 、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がクレジットカードの個別のフィールドを他のフィールドと一緒に自動入力するかどうか、またはすべてをクレジットカードとして保存する必要があるかどうかはわかりません。

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

14
goodeye

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

<input>に正しく名前を付けるだけで、クレジットカード情報のフィールドをブラウザに指示できるようになりました。

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

オートコンプリートを有効にするための公式現在のWHATWG HTML標準へのリンクです。 ==

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

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

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

  • すべての<label>フィールドに<input>を使用します
  • autocomplete属性を<input>タグに追加し、これを使用して入力します ガイド 。
  • すべての<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>も忘れずに！この情報も見つけることができます ここ 。

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

  • 名前
    • これらのいずれかを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（サインアップおよびパスワード変更フォーム用）

リソース

12
Katie

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

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

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

ここ は正規表現へのリンクですChrome検出をトリガーするために使用します

10
T C

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

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

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

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

ソリューションに戻ると、自動入力を機能させるには、カード番号にcc-number、カード所有者名にcc-name、cvcにcc-csc、カードの有効期限にcc-expをautocompleteに使用します。属性。 chromeautofillと互換性のあるサンプルを次に示します。

<label for="frmNameCC">Name on card</label>
<input name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name">

<label for="frmCCNum">Card Number</label>
<input name="cardnumber" id="frmCCNum" required autocomplete="cc-number">

<label for="frmCCCVC">CVC</label>
<input name="cvc" id="frmCCCVC" required autocomplete="cc-csc">

<label for="frmCCExp">Expiry</label>
<input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp">

出典： https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

1
shinobi

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

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

0
zhuhang.jasper