jquery - IE 11 和 Safari 上的自动填充/自动完成

Question

结帐页面上的 IE 11 和 Safari 用户遇到了一些问题。我们出售 3 种不同类型的门票包。结帐表格(除了信用卡信息、联系信息之外)包含票包数量字段，例如:

qtyA1
qtyA2
qtyA3
qtyA4
qtyB1
qtyB2
qtyB3
qtyC1
qtyC2

用户可以在其中指定他/她想要订购的一个或多个票包。用户可以使用键盘或单击 + 和 - 按钮输入多个票包。这些字段中的每一个都在 HTML 中定义，例如

<div class="input-group">
<div class="input-group-addon input-group-addon-button" data-controls="qtyA1" data-add="-1">-</div>
<input type="text" min="0" max="9" maxlength="1" class="qty form-control input-group-button-input" autocomplete="false" name="qtyA1" id="qtyA1" data-ticket-type="A" data-price="10.00" data-ticket-qty="2" value="">
<div class="input-group-addon input-group-addon-button" data-controls="qtyA1" data-add="1">+</div>

(有 9 个这样的字段，所以我不会在这里全部粘贴)。

在过去的 2 年里，结帐功能运行良好。但有时，平均每 5000 个订单一次，用户提交包含所有票包选项的表格，然后声称这不是他/她打算订购的。我们的服务器收到带有这样数据的 POST 请求:

qtyA1=1
qtyA2=1
qtyA3=1
qtyA4=1
qtyB1=1
qtyB2=1
qtyB3=1
qtyC1=1
qtyC2=1

每个门票包都有不同的门票数量和价格。价格较高的门票包中的门票数量较多。因此，订购 1 x qtyA2 比订购 2 x qtyA1 更可取。通过订购更高的门票组合，您可以以相同的价格获得更多的门票或以更少的金额获得相同数量的门票。因此一次订购所有选项毫无意义。

我们有一个自动填充检测脚本，它基于字段背景的变化，但它似乎只能在 Chrome、Firefox 和大多数(但不是所有)Safari 浏览器中工作。

我不知道 IE 中有任何自动填充功能(除了自动完成功能)。

我们在该问题上的一些发现:

• 只有使用 IE 11 或 Safari 浏览器的客户有此问题
• 80% 的人年龄在 55 岁以上，60% 的人年龄在 65 岁以上
• 60% 是回头客，其中 2/3 下过相同数量问题的订单
• 80% 使用 VISA 支付
• 几乎每个客户都是通过一次提交来下订单的，也就是说，在大多数情况下，他们的信用卡没有错误。
• 11.8% 的客户使用 IE 9-11
• 31.7% 使用 Safari
• 发生在 IE 用户身上的几率是 0.038%
• 发生在 Safari 用户身上的几率是 0.014%

我对可能导致问题的原因的看法:

• 未在 IE 和(可能)Safari 上检测到自动填充。
• 人们可能会在他们的浏览器中安装一些插件(一些 spy 搜索工具栏会在需要输入信用卡时与表单交互)——不太可能，但你永远不会知道。
• 老年人很难理解机票套餐的想法，因为只有 20% 的客户声称他们的订单。
• 至于老年人，他们设法非常快速地下订单(3-5 分钟)。也许他们正在使用一些表单数据管理工具/浏览器插件？但我猜老年人不会故意安装这样的东西。
• JavaScript 在客户的浏览器中被禁用，它阻止了自动填充检测。

The test checkout is available here

问题是:是什么导致表单字段在某些浏览器上被填满，如何防止？

Answer 1

这看起来是一个很不错的 bug。如果您找到它，我相信您可以找到一些解决方法。

我在这些情况下所做的是:

1) 获取一个月的 BrowserStack 订阅并开始测试它以重现问题

我很确定你可能已经检查过了，但我还做了一些其他的事情:

a) 再次寻找计算算法中的一些缺陷，例如意外输入的意外输出。

b) 确保我的计算不是由 js 中的意外事件触发

c) 我没有过早读取字段值:

例如，当用户进行选择时，尽量不要直接运行计算并动态更新建议，而是添加一个窗口超时，以便仅在设置所有字段输入后才进行计算:

window.setTimeout(function() { handlevalues(); updateSuggestions();}, 500);

我经常看到最后一种情况，因为某些浏览器由于其缓存机制而当场提供无效值。