iOS 7记住此卡片回调函数

Question

我遇到了一个问题，我们有一个支付页面，只允许您提交一次。在iOS上，如果您输入信用卡信息，它会询问您是否想要保存它（这是Safari功能，而不是我们的功能）。但是，在我们的JavaScript验证分配布尔值以禁止重新提交之后，就会出现此情况。Safari弹出窗口停止了页面传播，什么也没有发生。我想知道是否有一种方法可以使用回调或钩子来捕捉用户提交此值的事件，并继续进行表单提交。注意：我已经尝试在表单和输入上使用autocomplete =“off”来防止出现此弹出窗口，但并没有起作用。编辑：我发现，单击“现在不”后表单未提交的原因是我们使用了Recaptcha（该Recaptcha在图片的弹出窗口后面隐藏）。

- James McDonnell

---

尝试同时使用formnovalidate、autocorrect和autocomplete。 - Alex

Answer 1

令人惊讶的是，我很难弹出自动填充对话框。似乎Safari需要某种提示来表明您正在提交信用卡信息。如果您希望对话框消失并且您控制表单元素的名称，则将元素命名为与信用卡无关的名称：

这会触发自动填充：

<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>

这不会提示：

<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>

- Sam Nunnally

---

我会进行调查，我们在该字段上有一个最大长度为16，并且我猜他们也可能会寻找这个。如果您使用连接的iOS设备在Safari中对JavaScript进行分析，则可以在表单提交后看到Safari执行的内部调用。为了让您了解正在发生的情况。感谢您的答案。如果情况良好，我会给予您奖励。 - James McDonnell

我只能在我们的一个测试环境中弹出窗口，而不能在我的本地机器上。也许是因为只有那个环境有有效的证书？ - James McDonnell

使用SSL可能会影响方程式。在我的测试中，我使用了https连接。 - Sam Nunnally

我授予你这个赏金，因为你是唯一发布答案的人，我不想让它过期。如果今天构建后它确实有效，我会将其标记为正确答案。 - James McDonnell

这太疯狂了 :) 我偶然发现，这个弹出窗口只能在有效的 SSL 连接下使用，并且无法通过 autocomplete="off" 禁用，从而破坏了所有与提交按钮相关的 JavaScript 事件和执行。 - Anton S

我发现这个问题出在Recaptcha上，当Recaptcha未启用时，表单的功能是正常的。不确定这是否对你有帮助，Anton。 - James McDonnell

Answer 2

这是 Sam Nunnally的回答 的一个变种。

我遇到了这样一种情况：我正在使用一个 Python 包，但无法编辑信用卡名称，因此我必须使用 jQuery 在提交表单数据时动态重命名字段。这对于其他人是否能够按照他们的需求使用提交的表单数据可能有所不同。

以下是大部分相关代码，带有一些注释。我需要重命名字段并将标签从输入框中分离出来（当有一个标签 for 与输入框配对时，它会被 iOS 发现），同时为了保险起见，我加入了 autocomplete="off"。

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.
}

- Brendan