jquery causes keyboard to appear/disappear on android

Question

I have a responsive web page that I want to reorder with jquery when going from one size to a smaller one. Everything is great except when I reorder an element (a DIV, for example) that has an input in it, like the search form:

$( '#searchfrm' ).insertAfter( '#bodyfrm' );

If I do this, when I click the input, the keyboard appears for a second and then disappears. This happens only on Android, on iPhone it works perfectly.

If I comment the code line, the input works perfectly on Android but I don't want the search form on top, but on the bottom of the page on the responsive design.

How do I prevent this from happening? Thanks!

Answer 1

I had a similar issue but found it was due to the $(window).on("resize",function(){...}); and not the .insertAfter script used to reposition the element.

If the element you reposition has an input field and that input field is in focus ~ the default behavior of Android opening the keyboard actually resizes the browser causing the function to loop. - REFERENCE: (dealing-androids-constant-browser-resizing). Changing the function to trigger on (load) as opposed to (resize) did the trick for me. $(window).on("load",function(){...});

Answer 2

I found that the problem was when reordering the elements. The reordering process was being done all the time so, in Android, when the keyboard appeared, jquery was reordering again, making the keyboard disappear. The solution was adding a variable in jquery to prevent the reordering process all the time and do it only once when going from 1024 to 700, for example.