Measure the height of keyboard on PhoneGap app using jQuery


 I have been working on a PhoneGap project where I wanted  to scroll the content up and down whenever keyboard  appears and disappears.

 After a bit of searching here and there, I found out that  whenever keyboard appears window's resize event if fired.

 So to determine height of keyboard do the following steps

 1. Inside device ready event store original window height  inside a window variable

 window.height = $(window).height();


2. Now on window resize event execute a callback function

 $(window).resize(function(){
    window.currentHeight = $(this).height();
    window.heightDiff = window.height - window.currentHeight;
 });


So whenever there is focus on an input element, window's resize event will be triggered which will execute above function and we will have the height of keyboard inside window.heightDiff variable.

Putting it all together
 function onDeviceReady() {
   window.height = $(window).height();
   $(window).resize(function(){
    window.currentHeight = $(this).height();
    window.heightDiff = window.height - window.currentHeight;
  });
 }

Comments

fancyphone said…
Thanks for publishing such excellent knowledge. You are doing such a good job. This info is very helpful for everyone. Keep it up. Thanks. Read more info about iPhone Reparation Linköping
You've written a fantastic article about phone repairs. This article provided me with some useful knowledge. Thank you for providing this information.
Ralakde Limited said…
I really appreciate your work which you have shared here about the The article you have shared here is very informative and the points you have mentioned are very helpful. Thank you so much.phone repair center

Popular posts from this blog

How to get local time from UTC using Moment.JS

6 steps to create local copy of your live WordPress site

Partially rendering Handlerbars from Backbone view