Chrome AutoFill wird nicht ausgelöst

Ich befolgte den Ratschlag in this other Stack Overflow post und verwendete ein Muster in the list of regexes used by Chrome gefunden, aber aus irgendeinem Grund erkennt Chrome immer noch nicht, dass mein Feld ein Kreditkartenfeld ist.Chrome AutoFill wird nicht ausgelöst

Safari erkennt es einfach gut.

Hier ist der Eingang HTML, wie sie in der Web-Inspektor angezeigt:

<input class="control" id="card_number" type="tel" name="card_number" 
    value="" autocorrect="off" spellcheck="off" autocapitalize="off" 
    placeholder="Card number" data-reactid=".0.1.1.0.0.5.0.0" 
    x-autocompletetype="cc-number" autocompletetype="cc-number">

Ja, wie Sie aus dem data-reactid sehen können, ich bin mit React. Vielleicht hat das etwas damit zu tun. Wer weiß!

Ich habe eine Testseite eingerichtet, damit andere damit spielen können. Sie können https://entire.life/payment-form-test in Safari aufrufen und (wenn Sie AutoFill aktiviert und eine Kreditkarte gespeichert haben), wird es angezeigt. Wenn Sie es in Chrome besuchen, wird die Option zum automatischen Ausfüllen nicht angezeigt. Auch nachdem Sie den ersten Buchstaben Ihrer Karte eingegeben haben.

Dieser Code ist Open Source. Sie können die Quelle für die /payment-form-test Seite here sehen.

Quelle

2015-08-29 chadoh

Ja, das ist seltsam.Sie können eine [funktionierende Demo hier] (https://greenido.github.io/Product-Site-101/form-cc-example.html) sehen, in der die CC# für Sie in Chrome automatisch vervollständigt wird. Ich frage mich, ob es etwas damit zu tun hat, dass Sie 'type =" tel "' verwenden, aber ich hoffe nicht. – idbehold

Ah, das schien es wert zu versuchen, @idhehold, aber war nicht das Problem. Ich habe es in 'type =" text "' geändert, aber das Problem bleibt bestehen. Was macht Sinn! Ich habe die Eingabeelementattribute 'type =" tel "' und alle aus [Stripes Checkout-Beispiel] (https://stripe.com/docs/tutorials/checkout) kopiert. Es wäre seltsam gewesen, wenn es ein Problem für mich und nicht für sie verursacht hätte! Wir müssen an der falschen Stelle suchen. : - / – chadoh

Es wird funktionieren, wenn Sie folgende Attribute zu den jeweiligen Eingabeelemente hinzufügen:

autocomplete="cc-number"
autocomplete="cc-exp"
autocomplete="cc-csc"

Außerdem habe ich bemerkt, dass Chrome nicht automatisch vervollständigt wird, wenn eines der cc-Felder fehlt.

Sie können hier spielen, um - https://jsfiddle.net/q4gz33dg/2/

Quelle

2015-09-03 00:10:55 tiblu

Benennen Sie Ihre Ablauffelder card_expiry_month und card_expiry_year. Ich bin mir nicht sicher, warum Ihre aktuellen Namen die Regex nicht auslösen, aber das Ändern der Namen scheint zu funktionieren.

http://jsfiddle.net/7b6xtns7/ (es ist ein bisschen chaotisch, da es nicht gemacht wird)

Edit: Sieht aus wie Bestellung auch damit zu tun hat. Wenn das nicht funktioniert, versuchen, den Monat/Tag setzen unmittelbar nach der Nummer Eingabefeld

http://jsfiddle.net/c86Lmo0L/

Quelle

2015-09-02 23:52:19 arcyqwerty

Die akzeptierte Antwort ist sehr gut, dachte ich nur mit einigen Dokumentation läuten würde und eine Notiz über React (für diese Frage getaggt) ..

Reagieren erfordert Sie übergeben das Attribut als autoComplete="cc-number" (beachten Sie camelCase), andernfalls wird standardmäßig autocomplete="off" angezeigt.

Weitere Informationen:

Reagieren Attribute: https://facebook.github.io/react/docs/tags-and-attributes.html
Nützliche Beispiele: https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
https://html.spec.whatwg.org/multipage/forms.html#autofill

Quelle

2016-07-14 02:11:54 ptim

Chrome AutoFill wird nicht ausgelöst

Antwort

Verwandte Themen