JQuery makes keyboard appear / disappear on android
I have a responsive webpage that I want to reorder using jquery when going from one size to smaller. Everything is fine, except when I change the order of an element (like a DIV) that has an input to it, like a search form:
$ ('# searchfrm'). insertAfter ('# bodyfrm');
If I do this, when I click on the input, the keyboard appears for a second and then disappears. This only happens on Android, it works great on iPhone.
If I comment out the line of code, the input works fine on Android, but I don't want the search form to be at the top, but at the bottom of the page, on a responsive design.
How can I prevent this? Thank!
source to share
I found that the problem was the reordering of the elements. The reordering process was running all the time, so in Android when the keyboard appeared, jquery reordered again, making the keyboard disappear. The solution was to add a variable to jquery to prevent the reordering process all the time and only do it once when going from 1024 to 700. For example:
source to share
I had a similar problem, but I found it was related to $(window).on("resize",function(){...});
and not the .insertAfter script used to reposition the element.
If the element you are moving has an input field and that input field has focus - Android's default behavior when opening the keyboard actually resizes the browser causing the function to loop. - LINK: ( dealing-androids-constantly resizing browser ). Changing the function to include (loading) as opposed to (resizing) did my trick.$(window).on("load",function(){...});
source to share