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个这样的字段，所以我不会在这里粘贴它们。）

过去两年的结账工作正常。但有时，平均每5k订单一次，用户提交一份包含所有票券选项的表格，然后声称这不是他/她打算订购的。我们的服务器收到带有这样数据的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的客户订购了相同的QTY问题
80％使用VISA付款
几乎每个客户都提交单一提交的订单，即大多数情况下信用卡没有错误。
11.8％的客户使用IE 9-11
31.7％正在使用Safari
IE用户发生的可能性为0.038％
Safari用户偶然发生的事情是0.014％

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

在IE和（可能）Safari上未检测到自动填充。
人们可能会在浏览器中安装一些插件（当有信用卡输入时，一些间谍搜索工具栏会与表单进行交互） - 不太可能，但你永远不知道。
老年人在理解门票包装的想法方面遇到困难，因为只有20％的顾客声称他们的订单。
对于老年人，他们设法很快（3-5分钟）下订单。也许他们正在使用一些Form数据管理工具/浏览器插件？但我想老年人不会故意安装这样的东西。
在客户的浏览器中禁用了JavaScript，并且它阻止了自动填充检测。

The test checkout is available here

问题是：是什么原因导致表单字段在某些浏览器上填充，以及如何防止它？

Answer 1

这看起来像是一个非常好的bug。如果你找到它，我很有信心你可以找到一些解决方法。

在这些情况下我做的是：

1）抓住一个月的BrowserStack订阅并开始测试它的地狱来重现问题

我很确定你可能已经检查了，但我还有其他一些事情：

a）再次看一下计算算法中的一些缺陷，就像意外输入的意外输出一样。

b）确保我的计算不是由js

中的意外事件触发的

c）我不是太早阅读字段值：

例如，当用户进行选择时，尽量不直接运行计算并动态更新建议，但只有在设置了所有字段输入后才添加窗口超时以进行计算：

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

我经常看到这最后一个案例，因为有些浏览器由于其缓存机制而在现场提供无效值，而不是。

在IE 11和Safari

1 个答案: