Google 地点自动完成插件在 Firefox 中不工作 android
Google Places Autocomplete plugin isnt working in Firefox android
我们在我们的网站上使用 google 的 places-autocomplete
插件。
最近,我们收到了网站访问者的多起投诉,称此插件无法在 Android 版本的 Firefox 中运行。不过,它在桌面版 Firefox 中运行良好。
问题可以通过
简单观察
- 前往地点自动完成示例here
- 正在尝试在 "Enter a location" 搜索输入中输入邮政编码
您将观察到以下 2 个问题 -
- Google 自动完成应该在您开始输入时显示建议
邮政编码。但直到有人在 5 位邮政编码后键入 space 或 , 时才会出现。
- 当建议确实出现时(在键入 space 或 、 之后),您无法选择第一个建议。当您点击它时,光标会移回搜索输入。但是您可以正确选择第二个或第三个建议。
问题 #2 对用户来说非常烦人和沮丧。我们已经收到多起关于此的投诉。
我已经在 Samsung S4 运行 Android 4.4.2 上的 Firefox 版本 36.0.2 上确认了这一点。
如何解决?
解决第二个问题的方法是为第一个自动完成建议提供上边距,以便用户可以单击它。它不漂亮但很实用。
css
.FirefoxAndroid .pac-container .pac-item:first-child {
margin-top: 20px;
}
js
<script>
var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
var is_android = navigator.userAgent.toLowerCase().indexOf('android') > -1;
if(is_firefox && is_android){
$('html').addClass('FirefoxAndroid');
}
</script>
我今天遇到了同样的问题 - 我正在工作的网站在每个网络浏览器上都能完美运行,自动完成功能也很好,但在 FF 移动版上除外。
在尝试了 3-4 种解决方案后,对我有用的解决方案是在我的代码顶部声明 var place
。
我有类似的东西
var autocomplete;
var place;
var input = document.getElementById('location');
var options = {
componentRestrictions: {'country':'be'},
types: ['(regions)'] // (cities)
};
autocomplete = new google.maps.places.Autocomplete(input,options);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
place = autocomplete.getPlace();
...
}
因为我没有在顶部声明 place
,所以它不能只在 FF 移动设备上工作。
说不定会对以后知道的人有所帮助
我们在我们的网站上使用 google 的 places-autocomplete
插件。
最近,我们收到了网站访问者的多起投诉,称此插件无法在 Android 版本的 Firefox 中运行。不过,它在桌面版 Firefox 中运行良好。
问题可以通过
简单观察- 前往地点自动完成示例here
- 正在尝试在 "Enter a location" 搜索输入中输入邮政编码
您将观察到以下 2 个问题 -
- Google 自动完成应该在您开始输入时显示建议 邮政编码。但直到有人在 5 位邮政编码后键入 space 或 , 时才会出现。
- 当建议确实出现时(在键入 space 或 、 之后),您无法选择第一个建议。当您点击它时,光标会移回搜索输入。但是您可以正确选择第二个或第三个建议。
问题 #2 对用户来说非常烦人和沮丧。我们已经收到多起关于此的投诉。
我已经在 Samsung S4 运行 Android 4.4.2 上的 Firefox 版本 36.0.2 上确认了这一点。
如何解决?
解决第二个问题的方法是为第一个自动完成建议提供上边距,以便用户可以单击它。它不漂亮但很实用。
css
.FirefoxAndroid .pac-container .pac-item:first-child {
margin-top: 20px;
}
js
<script>
var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
var is_android = navigator.userAgent.toLowerCase().indexOf('android') > -1;
if(is_firefox && is_android){
$('html').addClass('FirefoxAndroid');
}
</script>
我今天遇到了同样的问题 - 我正在工作的网站在每个网络浏览器上都能完美运行,自动完成功能也很好,但在 FF 移动版上除外。
在尝试了 3-4 种解决方案后,对我有用的解决方案是在我的代码顶部声明 var place
。
我有类似的东西
var autocomplete;
var place;
var input = document.getElementById('location');
var options = {
componentRestrictions: {'country':'be'},
types: ['(regions)'] // (cities)
};
autocomplete = new google.maps.places.Autocomplete(input,options);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
place = autocomplete.getPlace();
...
}
因为我没有在顶部声明 place
,所以它不能只在 FF 移动设备上工作。
说不定会对以后知道的人有所帮助