Question

我正在使用 Google Maps Js API ，当我搜索地点时，我的输入搜索栏可以正常工作。当我通过iPhone设备使用它时，它也可以正常工作，但是当我通过 Android设备使用它时，键盘会立即出现并消失。我已经找到了一些有关在我按下搜索栏时android键盘失去焦点的解决方案，但是我不知道应该如何或在何处实现该解决方案。我有以下代码部分：

这是我的输入和onclick事件以及我的搜索栏：

<div class="col-sm-12" style="padding-right: 0px; margin-bottom: 10px;">
  <span>Closest points</span>
  <input id="locationTextField" type="text" size="40" float: left;">
  <button class="btn pointsok" onclick='gotocustomlocation()' style="float: left; margin-left: 2px; width: 33px; padding-left: 6px; padding-right: 6px;">OK</button>
</div>

也许autocomplete.getPlace以上的地方可以解决此问题？

<script>
            function gotocustomlocation() {
                var place = autocomplete.getPlace();
                var lat = place.geometry.location.lat();
                var lng = place.geometry.location.lng();
                console.log(lat);
                console.log(lng);
                jQuery.ajax({
                    type: 'GET',
                    url: "<?php echo JURI::base() . "index.php?option=com_ajax&module=points&format=json&method=getClosestAreas&lat=";?>"  + lat + "&lng=" + lng,
                    success:function(resp){
                        if (typeof map !== 'undefined') {
                            jQuery('#prefectures option[value="noval"]').attr("selected",true);
                            jQuery('#subPrefectures').find('option').remove();
                            jQuery('#subPrefectures').append(jQuery("<option></option>").attr("value","noval").text('Choose Area')); 
                            jQuery('#subPrefectures').prop('disabled', 'disabled');                            
                            kmlLayer.forEach(function(l) {
                                l.setMap(null);
                            });                            
                            var latLng = new google.maps.LatLng(lat, lng);
                            map.setZoom(11);
                            map.panTo(latLng);                            
                        }
                        var distances = JSON.parse(resp.data);
                        var htmlcontent = "Closest Spot<br />";
                        for (var i=0; i<10; i++) {
                            var uri =  "<?php echo JURI::base(); ?>" + "weather/" + distances[i].uri;
                            htmlcontent += "<span style='display:block;float:left;white-space:nowrap;'> <a href='"+uri+"'>"+distances[i].alias+"</a>";
                            if (i < 10) {
                                htmlcontent += " | </span>";
                            } else {
                                htmlcontent += "</span>";
                            }                            
                        }
                        jQuery("#pointsareas").html(htmlcontent);
                    },
                    error:function(){
                    }
                });  
            }
            //google.maps.event.addDomListener(window, 'load', init);
        </script>

请注意，google.maps.event.addDomListener(window, 'load', init);不会影响搜索栏。

是JS中的问题，还是 @media在CSS中调整大小？

Answer 1

我遇到了同样的问题，@ amit的解决方案有所帮助。问题在于，单击搜索栏会以某种方式触发“ orientationchange”或“ resize”事件，也许显示键盘会触发该事件。我不知道。

触发事件后，即使搜索栏已位于移动容器中，它也会移动到该容器中。因此它从其容器中取消链接并再次链接到它。这会导致搜索栏失去焦点，因此浏览器会隐藏键盘。

问题代码：

$(window).on("orientationchange resize", function() { breakpointChecks(); });

function breakpointChecks()
{
        ifMaxWidth(767, function() {
            $searchForm.appendTo($mobileSearchContainer);
        });

        ifMinWidth(768, function() {
            $searchForm.appendTo($desktopSearchContainer);
        });
}

解决方案：

添加一个变量，该变量存储当前模式（桌面或移动模式），并且仅当我们尚未处于该模式时才触发移动代码。

var currentMode = "";
$(window).on("orientationchange resize", function() { breakpointChecks(); });

function breakpointChecks()
{
    if (currentMode != "mobile") {
        ifMaxWidth(767, function() {
            currentMode = "mobile";
            $searchForm.appendTo($mobileSearchContainer);
            $loginRegisterBox.appendTo($headerContainerMobile);
        });
    }

    if (currentMode != "desktop") {
        ifMinWidth(768, function() {
            currentMode = "desktop";
            $searchForm.appendTo($desktopSearchContainer);
            $loginRegisterBox.appendTo($desktopLoginRegisterContainer);
        });
    }
}

Answer 2

问题是当出现软键盘时，它会触发窗口大小调整。与我一样，当您使用响应式网站时，您可能会拥有处理大小调整的代码。出现键盘时，会发生窗口调整大小，并且由于自定义调整大小代码而使键盘消失

如果将调整大小事件重写为方向更改事件。虽然这不是理想的情况，但是如果应用程序是唯一目标，那么应该没问题。

为澄清起见，请更改为（使用jQuery）：

$(window).resize (function ()
{
    // Code on resize
});

更改为（使用jQuery）：

$(window).bind ('orientationchange', function ()
{
    // Code on screen rotation
});

此外，chrisdew here建议的替代解决方案建议

“将侦听器添加到输入的焦点事件，该事件在0.5 s内无法响应调整大小事件。”。如果您希望在每次输入聚焦时有0.5s的延迟，这也应该起作用。

Answer 3

您是否为此项目在Google开发人员控制台上启用了Google Maps和Google Maps SDK？请交叉检查并启用（如果未启用）。您必须为此同时启用两者。我也遇到了同样的错误，问题实际上不在代码中。

Answer 4

对此的解决方案是剥离代码，并对可能导致错误的所有div重新排序。因此，要解决此问题，由于搜索栏的实现位于边栏中，因此我不得不再次处理模板中的所有元素，对它们重新排序并找到位置（更具体地讲，适当的width / height / padding规则），不能克服Bootstrap的行和列的整个宽度。无需使用任何JavaScript即可检测和更改方向就可以了。只有纯HTML重新排序。

Answer 5

我们遇到了同样的问题，在我们的例子中是横向的 CSS 媒体查询规则。

要解决此类问题，请尝试从头开始，禁用所有 CSS 并在正文中获取简单的输入字段，而不是查看哪些样式/块会导致回流。

单击搜索输入时，Android键盘会出现并消失

5 个答案:

问题代码：

解决方案：