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

Anonymous said…
thank u blogger
Unknown said…
This doesn't work for me. I'm programming an app using jQuery, HTML5, and CSS3 and adding PhoneGap Cordova for native functionality. My screen in not resizing, it's just pushing the entire page up when I click on a text field and the keyboard appears. I was trying to use a Cordova plugin to get the keyboard height but that's not working either. Do you have any other recommendations?
for ict 99 said…
Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. JavaScript Training in Chennai
David  aarons said…
This information is meaningful and magnificent which you have shared here. I am impressed by the details that you have shared in this post and It reveals how nicely you understand this subject. I would like to thanks for sharing this article here. Montacargas precio.
David  aarons said…
This information is meaningful and magnificent which you have shared here. I am impressed by the details that you have shared in this post and It reveals how nicely you understand this subject. I would like to thanks for sharing this article here. agencia de diseƱo grafico.
David  aarons said…
This information is meaningful and magnificent which you have shared here. I am impressed by the details that you have shared in this post and It reveals how nicely you understand this subject. I would like to thanks for sharing this article here. Best Premium Snapchat For Sale.
David  aarons said…
This information is meaningful and magnificent which you have shared here. I am impressed by the details that you have shared in this post and It reveals how nicely you understand this subject. I would like to thanks for sharing this article here. Safest SMM Service Provider.
David  aarons said…
I got so involved in this material that I couldn’t stop reading. I admire this article for the well-researched content and excellent wording. I am impressed with your work and skill. Thank you so much. Professional SEO Agency in Singapore.
David  aarons said…
This information is meaningful and magnificent which you have shared here. I am impressed by the details that you have shared in this post and It reveals how nicely you understand this subject. I would like to thanks for sharing this article here. PDF Conversion.
David  aarons said…
Nice article, which you have shared here. The article you have shared here is very informative and the points you have mentioned are very helpful. Thank you so much. digital marketing solutions.
David  aarons said…
I really appreciate your work which you have shared here. The article you have shared here is very informative and the points you have mentioned are very helpful. Thank you so much. Best Lightroom Mobile Presets.
David  aarons said…
I read this article; it is really informative one. Complete rich content and fully informative. Your way of writing and making things clear is very impressive. Thanking you for such an informative article. Watchtime smm panel.

Popular posts from this blog

How to get local time from UTC using Moment.JS

Step by step Cordova calabash-ios automation