logo标签列表

谷歌地点覆盖自动完成关闭

javascriptgoogle-places-apigoogle-appsgoogle-places
4
我正在网站上使用Google Places API来输入地址：

我在我的网站上使用Google Places API来输入地址：

<input type="text" name="street[]" id="street1" autocomplete="none" />

但是一旦Google Places加载完成，它就会将我的autocomplete="none"替换为autocomplete="off"。问题在于Google Chrome不支持"off"值，并继续显示自动填充建议。有没有任何方法可以解决这个问题？感谢！
3个回答
7

以下方法适用于所有浏览器：

TL;DR

将输入框的名称和ID更改为与数据无关的名称，例如'data_input_field_1'。然后在标签中间添加&#8204;字符。这是一个不可打印的字符，所以您看不到它，但它会欺骗浏览器，使其不识别该字段需要自动完成，因此不会显示内置的自动完成小部件！

详细信息

几乎所有浏览器使用字段的名称、ID、占位符和标签的组合来确定该字段是否属于一组可以受益于自动完成的地址字段。因此，如果您有一个字段，例如 <input type="text" id="address" name="street_address">，几乎所有浏览器都会将该字段解释为地址字段。因此，浏览器将显示其内置的自动完成小部件。希望通过autocomplete="off"属性来禁用自动完成功能的想法非常美好，但是，大多数现代浏览器不遵守这个请求。

因此，我们需要使用一些技巧来阻止浏览器显示内置自动完成小部件。我们将使用的方法是欺骗浏览器，使其认为该字段根本不是地址字段。

首先更改id和name属性的名称，以避免透露您正在处理与地址有关的数据。因此，不要使用<input type="text" id="city-input" name="city">这样的名称，而应改用类似于<input type="text" id="input-field-3" name="data_input_field_3">的名称。浏览器不知道data_input_field_3代表什么。但是您知道。

如果可能，不要使用占位符文本，因为大多数浏览器也会考虑它。如果必须使用占位符文本，则必须创造性地确保您没有使用任何与地址参数本身相关的单词（例如City）。使用诸如输入位置这样的内容即可解决问题。

最后一个参数是附加到字段的标签。但是，如果您像我一样，您可能希望保留标签并向用户显示可识别的字段，例如“地址”、“城市”、“州/省”、“国家”。好消息是：您可以这样做！实现这一点的最佳方法是在标签的第二个字符中插入零宽度非连接符字符&#8204;。因此，将<label>City</label>替换为<label>C&#8204;ity</label>。这是一个不可打印的字符，因此您的用户将看到City，但浏览器将被欺骗为看到C ity并且不会识别该字段！

任务完成！如果一切顺利，浏览器将不再在那些字段上显示内置的地址自动填充小部件！

希望这能对你的努力有所帮助！

1
真是疯狂，我们不得不使用 ‌ 但它确实起作用了，哈哈。 - James0r
1

您可以检测到Google Places设置了autocomplete =“off”，并通过以下方式覆盖它：

const observer = new MutationObserver(function (mutationsList, observer) {
    for (const mutation of mutationsList) {
        if (mutation.attributeName == 'autocomplete' && $(mutation.target).attr('autocomplete') == 'off') {
            observer.disconnect();
            $(mutation.target).attr('autocomplete', 'none');
        }
    }
});

observer.observe(document.getElementById('street1'), { attributes: true });

autocomplete = new google.maps.places.Autocomplete(document.getElementById('street1'), {
    fields: ['address_components'],
    types: ['address'],
});
这个程序在2022年11月03日运行正常，已经在Chrome和Edge上测试过。 - Danish Muneer
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接