为单行地址输入禁用Safari自动填充（2019）

在移动设备上填写表格很乏味-随着用户从输入到输入的跳跃，先前输入的信息变得不可见，并且难以返回。为了简化地址收集过程，我们不再要求用户将其地址的每个项目输入到单独的输入中。相反，我们在一次输入中收集了他们的整个地址，类似于Google Maps的工作方式。

尽管“自动填充”（或“自动完成”，取决于浏览器所称的名称）旨在缓解最初填充多个输入的问题，但是当合并这些输入时，它的表现并不理想。在我们的例子中，当我们要求用户在单个输入中提供街道地址，城市和州时，AutoFill仅使用值之一填充该字段。

为了简单起见，假设我们的输入标签定义如下：

当用户期望Safari用“ GA Main St，Atlanta，GA”填充输入时，Safari将使用用户的存储状态“ GA”填充输入。

在所有浏览器中都存在此问题。当前，没有浏览器的自动填充功能可以将多个地址片段整齐地串联到一个输入中。但是，针对这些浏览器的解决方案更加简单明了且已记录在案。在Chrome和Firefox中，您可以通过将输入类型设置为“搜索”并将自动完成设置为“关闭”来阻止自动填充尝试。

经过反复试验和实验，我们发现Safari的AutoFill尽最大努力确定应使用哪个AutoFill字段填充输入内容。 Safari会按以下顺序评估输入的属性：名称，占位符和标签。如果Safari发现该名称不包含任何关键字，它将退回到占位符文本，依此类推。

＆lt;标签＆gt;地址＆lt;输入类型=“搜索”占位符=“城市”名称=“州” /＆gt; ＆lt; / label＆gt;

如果存在多个值，它将使用最后一个值-在这种情况下为“状态”。

直到第7版，Safari一直使用autocomplete属性的值，因此将其设置为“ off”即可。现在，大多数现代浏览器都选择忽略自动完成的值，因此该解决方案不再起作用。您可以在此处找到自动完成支持的完整表格。

另一种选择是将自动完成设置为无效值，例如“ false”。这在某些浏览器中有效，因为浏览器无法解释该值，因此它不会尝试显示“自动填充”。

如果您不想使用name属性，另一种方法是将等效的unicode字符插入占位符。

您还应该注意，这会使视力障碍的用户无法访问您的站点，因为屏幕阅读器将无法正确阅读占位符文本。

我们没有标签元素，只有带有占位符值的输入。我们的解决方案是在名称属性中添加单词“ search”。 Safari认为“搜索”有效的AutoFIll值并将其映射到不需要AutoFIll的输入，因此它不会尝试检查占位符或标签的值。我们找不到Safari自动填充正则表达式列表，例如Chrome提供的自动填充正则表达式。我们不能说“搜索”以外的其他值会阻止自动填充显示。

＆lt;输入类型=“搜索”自动完成=“关”占位符=“街道地址，城市，州”名称=“搜索项” /＆gt;

在名称属性中插入带有“搜索”一词的文本将阻止Safari显示“自动填充”图标和键盘选项。 之所以可行，是因为Safari执行正则表达式并将“搜索”映射到不需要自动填充的输入。