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

Question

I am using Google Maps Js API and my input search bar works fine when I search for a place. When i use it via iPhone devices it works fine too, but when I use it via Android devices then the keyboard appears and disappears instantly . I have already found some solutions about the android keyboard losing focus when i press the search bar, but I can't understand how or where I should implement the solution. I have the following part of code:

Here is my input and onclick event and my search bar:

<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>

Maybe something above autocomplete.getPlace could fix the problem ?

<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>

Mind that google.maps.event.addDomListener(window, 'load', init); is not affecting the search bar.

Should it be a problem in JS, or it could be a wrong @media resizing in CSS ?

Answer 1

The problem is when the soft keyboard appears, it triggers a window resize. When you are working with a responsive website, as I am, you are likely to have code that handles resizing. When the keyboard appears, a window resize occurs and the keyboard disappears due to custom resize code

If you rewrite resize events to be orientationchange events. While this isn't an ideal situation, if an app is the only target, then it should be fine.

To clarify, change from (using jQuery):

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

Change to (using jQuery):

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

Also, An alternative solution suggested by chrisdew here suggests

"adding a listener to the input's focus event which disables reacting to resize events for 0.5s.". This should also work if you want to have a 0.5s delay whenever an input is focused.

Answer 2

I had the same problem and @amit's solution helped. The problem is, that clicking on the searchbar somehow triggers the "orientationchange" or "resize" event, maybe the keyboard which shows triggers it. I don't know.

After the event is triggered, the searchbar gets moved to the mobile container, even though it is already in this container. So it gets unlinked from its container and linked to it again. This causes the searchbar to loose focus, so the browser hides the keyboard.

Problem Code:

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

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

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

Solution:

Add a variable which stores the current mode (desktop or mobile) and only trigger the move code if we are not already on this mode.

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

Have you enabled Google Maps and Google Maps SDK on Google developer console for this project? Please cross check and enable if they are not enabled. You will have to enable both for this. I was also getting the same error and the problem was not in code actually.

Answer 4

The solution on this was to strip the code out, and re ordering any div that might cause the error. So to fix this, since the implementation of the search bar was in the sidebar, I had to play again with all elements of my template, re-ordering them and find a position (to be more specific the appropriate width / height / padding rules) that is not overcoming the Bootstrap's full width of rows and columns. That's pretty much of it without using any JavaScript to detect and change the orientation. Only pure HTML re ordering.

Answer 5

We had the same problem, in our case it was CSS media query rule for landscape.

To fix such issue, try go from beginning, disable all CSS and get simple input field in a body, than look what styles/blocks cause reflow.