单击搜索输入时，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 秒的延迟，这也应该有效。