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

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 中的问题，还是可能是CSS 中错误的@media 调整大小？

Answer 1

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

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

为了澄清，从（使用jQuery）更改：

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

更改为（使用 jQuery）：

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

此外，另一种解决方案建议通过chrisdew这里建议

“向输入的焦点事件添加一个侦听器，该事件禁用对调整大小事件的响应 0.5 秒。”。 如果您希望在输入焦点时有 0.5 秒的延迟，这也应该有效。

Answer 2

我遇到了同样的问题，@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 3

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

Answer 4

对此的解决方案是剥离代码，并重新排序可能导致错误的任何div 。 所以为了解决这个问题，由于搜索栏的实现是在侧边栏中，我不得不再次使用我模板的所有元素，重新排序它们并找到一个位置（更具体地说，适当的width / height / padding规则) 没有克服 Bootstrap 的行和列的全宽。 几乎没有使用任何JavaScript来检测和更改方向。 仅纯HTML重新排序。

Answer 5

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

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