一部のフォームでは、Chromeクレジットカードの自動入力による自動入力プロンプトが表示されます。
編集:スクリーンショットを追加します。これは、ブラウザのオートコンプリートと同じではありません。以前に同じフォームに値を入力する必要はありません。
ブラウザがこれらをクレジットカードフィールドとして検出し、この動作をトリガーするように、HTMLフォームをどのように作成する必要がありますか?
Stripeフォームで動作する例が理想的です。
この回答から 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サイトがそれをブロックしています。
この質問はかなり古いですが、2019年に更新された回答があります!
<input>
に正しく名前を付けるだけで、クレジットカード情報のフィールドをブラウザに指示できるようになりました。
次の答えはここからの私の元の答えからです: https://stackoverflow.com/a/41965106/169615
オートコンプリートを有効にするための公式現在のWHATWG HTML標準へのリンクです。 ==
Googleは、モバイルデバイスに適したWebアプリケーションを開発するための かなり素晴らしいガイド を作成しました。フォームの入力に名前を付けて自動入力を簡単に使用する方法に関するセクションがあります。それはモバイル向けに書かれていますが、これはデスクトップとモバイルの両方に当てはまります!
オートコンプリートを有効にする方法に関するいくつかの重要なポイントは次のとおりです。
<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
:に使用します。street-address
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
(サインアップおよびパスワード変更フォーム用)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
Chromeはプレースホルダーもスキャンします。
例:<input placeholder='dd-mm-yyyy'/>
は、クレジットカードフィールドになるようにトリガーします。