IOS 7 erinnere mich an diese Karte Rückruf

Question

Ich habe dieses Problem, wo wir eine Zahlungsseite haben, die wir Ihnen nur erlauben, einmal zu übermitteln.

Und auf iOS, wenn Sie eine Kreditkarte eingeben, werden Sie gefragt, ob Sie es speichern möchten (Safari-Funktion nicht unsere). Dies wird jedoch aufgerufen, nachdem unsere JavaScript-Validierung den booleschen Wert zugewiesen hat, um die erneute Übertragung zu verbieten.

Das Safari-Popup stoppt die Seitenausbreitung und es passiert nichts.

Ich fragte mich, ob es eine Möglichkeit gab, einen Callback oder Hook zu verwenden, wenn der Benutzer diesen Wert übergibt und mit der Formularübergabe fortfährt.

Hinweis: Ich habe bereits versucht autocomplete="off" auf dem Formular und dem Eingang dieses Popup nicht angezeigt werden. Was nicht funktioniert.

Bearbeiten: Ich entdeckte, dass der Grund, warum das Formular nicht nach dem Klicken nicht jetzt reicht, ist, weil wir Recaptcha verwenden (das hinter dem Popup im Bild versteckt ist).

Answer 1

Überraschenderweise hatte ich eine schwierige Zeit, um Pop-up den automatischen Ausfüllen Dialog zu bekommen. Es scheint, dass Safari eine Art Hinweis benötigt, dass Sie Kreditkarteninformationen übermitteln. Wenn Sie den Dialog wollen weg einfach gehen, und Sie steuern den Namen der Formularelemente, benennen Sie dann die Elemente in keinem Zusammenhang etwas zu einer Kreditkarte:

Dies fordert autofill:

<form action="test" method="post" id="credit"> 
    Name:<input type="text" name="cardholder" /> 
    <br/> 
    Credit Card Type: 
    <select name="cardtype" > 
     <option></option> 
     <option value="amex">amex</option> 
     <option value="visa">visa</option> 
     <option value="mastercard">mastercard</option> 
    </select> 
    <br/> 
    Credit Card:<input type="text" name="cardnumber" /> 
    <br/> 
    Expiration:<input type="text" name="expirationdate" /> 
    <br/> 
    <input type="submit"> 
</form> 

Dies gilt nicht prompt :

<form action="test" method="post" id="credit" autocomplete="off" > 
    Name:<input type="text" name="h" autocomplete="off" /> 
    <br/> 
    Credit Card Type: 
    <select name="t" autocomplete="off" > 
     <option></option> 
     <option value="amex">amex</option> 
     <option value="visa">visa</option> 
     <option value="mastercard">mastercard</option> 
    </select> 
    <br/> 
    Credit Card:<input type="text" name="n" autocomplete="off" /> 
    <br/> 
    Expiration:<input type="text" name="d" autocomplete="off" /> 
    <br/> 
    <input type="submit"> 
</form> 

Answer 2

Dies ist eine Variante von Sam Nunnally's answer.

Ich war in einer Situation, in der ich mit einem Python-Paket arbeitete und konnte den Namen der Kreditkarte nicht bearbeiten, so musste ich Felder mit jQuery im laufenden Betrieb umbenennen. Je nachdem, wie sie die übermittelten Formulardaten verwenden müssen, funktioniert dies möglicherweise für andere.

Hier ist der meiste relevante Code, der für mich mit einigen Kommentaren funktioniert hat. Ich musste das Feld umbenennen und das Etikett von der Eingabe lösen (wenn es ein Etikett gab for die Eingabe, die sagte "Kreditkarte", iOS schnüffelte es aus), und ich warf autocomplete="off" für ein gutes Maß.

var iOSCheck = false; 
var cardField = $("#id_card_number"); 

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) { // This could be more elegant; should sniff iOS 7.x specifically 
    iOSCheck = true; 
} 

if (iOSCheck == true) { 
    $("#id_card_number").attr('id','workaround-one'); // Rename ID. Nondescript name. 
    $('#workaround-one').attr('autocomplete','off'); // Turn off autocomplete (not sure if necessary) 

    $("#w1-label").after('<div class="simulate-label">Credit Card</div>'); // Kill the label. Append the text, 
    $("#w1-label").remove(); // Then remove the label. That way the text in the label doesn't link to the CC field. 

    cardField = $('#workaround-one'); // Redefine our credit card field so we can reference it later in the script. 
}