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

在过去的两年里，结帐工作很顺利。但有时，平均每5k订单一次，用户会提交一个带有所有票证包选项的表单，然后声称这不是他/她打算订购的。我们的服务器接收带有这样一个数据的POST请求：

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

每个票包有不同的票量和价格。价格较高的票包里有更多的票。因此，它比1x qtyA2比2x qtyA1更可取。通过订购更高的票包，您可以以相同的价格获得更多的门票，也可以以较少的数量获得相同数量的门票。所以一次订购所有选项都是没有意义的。

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

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

我们对这一问题的一些调查结果如下：

• 只有使用IE 11或Safari浏览器的客户才有此问题。
• 80%是55+岁，60%是65+
• 60%的客户正在退货，其中2/3的客户订购了相同数量的产品。
• 80%的人是用签证付款的
• 几乎每个客户都是一次性提交订单，也就是说，在大多数情况下，他们的信用卡没有错误。
• 11.8%的客户使用IE 9-11
• 31.7%使用Safari
• 它发生在IE用户身上的几率是0.038%。
• 它发生在Safari用户身上的可能性是0.014%

我对造成这个问题的原因的思考：

• 在IE和(可能) Safari上没有检测到自动填充。
• 人们可能在浏览器中安装了一些插件(一些间谍搜索工具栏，在输入信用卡时与表单交互)--不太可能，但你永远不会知道。
• 老年人很难理解票包的概念，因为只有20%的顾客声称他们的订单。
• 至于老年人，他们很快就下了订单(3-5分钟)。也许他们正在使用某种形式的数据管理工具/浏览器插件？但我想老年人并不是故意安装这样的设备。
• JavaScript在客户浏览器中被禁用，防止自动填充检测。

这里有测试签出。

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

Answer 1

这看起来是个很不错的小虫子。如果你找到了，我很有信心你能找到一些解决办法。

在这种情况下，我所做的是：

1)争取一个月的BrowserStack订阅，并开始对其进行测试以复制该问题。

我敢肯定你可能已经查过了，但以下是我要做的一些事情：

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

( b)确保js中的意外事件不会触发我的计算。

( c)我不会过早地读取字段值：

例如，当用户执行所选内容时，尝试不直接运行计算并动态更新建议，而是添加一个窗口超时，仅在设置所有字段输入之后才执行计算：

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

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