CODEWITHSUNDEEP
iphonecordovaphonegap-buildiphone-keypad
Arunkumar
Arunkumar

Reputation: 11

iphone keyboard popup issue on phonegap apps?

I am creating a new iphone apps using phonegap(cordova).I had one problem on my app.If i click anyone input field the iphone keyboard is popup and also whole page positon was changing. Like the fixed footer is popup above the keyboard.Please guide me.

Thank you

Upvotes: 0

Views: 449

Answers (1)

Richard Kennard
Richard Kennard

Reputation: 1325

This is a difficult problem to get 'right'. You can try and hide the footer on input element focus, and show on blur, but that isn't always reliable on iOS. Every so often (one time in ten, say, on my iPhone 4S) the focus event seems to fail to fire (or maybe there is a race condition), and the footer does not get hidden.

After much trial and error, I came up with this interesting solution:

<head>
    ...various JS and CSS imports...
    <script type="text/javascript">
        document.write( '<style>#footer{visibility:hidden}@media(min-height:' + ($( window ).height() - 10) + 'px){#footer{visibility:visible}}</style>' );
    </script>
</head>

Essentially: use JavaScript to determine the window height of the device, then dynamically create a CSS media query to hide the footer when the height of the window shrinks by 10 pixels. Because opening the keyboard resizes the browser display, this never fails on iOS. Because it's using the CSS engine rather than JavaScript, it's much faster and smoother too!

Note: I found using 'visibility:hidden' less glitchy than 'display:none' or 'position:static', but your mileage may vary.

Upvotes: 0

Related Questions