jquery causes keyboard to appear/disappear on android

3

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!

Bruno

Posted 2015-04-22T01:39:59.503

Reputation: 26

Does the JQuery reorder with any input boxes? – Shaun Loftin – 2015-04-22T01:42:23.240

Yes, reordering works fine on all elements, the problem is when reordering, the input presents that behavior (show/hide keyboard) – Bruno – 2015-04-22T13:32:38.523

Answers

1

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.

Bruno

Posted 2015-04-22T01:39:59.503

Reputation: 26