How to detect keyboard show/ hide event in jquery for mobile web application

Question

I am working on web base mobile (HTML) application. Is there any way to detect keyboard event like when keyboard is visible and keyboard hide, base on that I can control other screen layout.

I've tried focus, blur, browser resize event but my problem have not resolve 100%, so I am looking for only keyboard event, actually I want to hide footer over keyboard when keyboard is visible as it(footer) appear over the keyboard, so I am trying to set footer position relative when keyboard is visible and footer position as fixed when keyboard goes hide.

I've tried as below it work but that could not be the 100% resolution of my problem.

$(document).ready(function () {

  $("input").focus(function() {
    $(".copyright_link").css("position","relative");    
  });      

  $("input").blur(function() {
    $(".copyright_link").css("position","fixed");   
  });      

});

Can anybody help me how to resolve footer problem or let me know if there is keyboard event in jquery.

Answer 1

You can use resize event to get if keyboard is appearing or not

$(document).ready(function(){   var _originalSize = $(window).width() + $(window).height()   $(window).resize(function(){     if($(window).width() + $(window).height() != _originalSize){       console.log("keyboard show up");       $(".copyright_link").css("position","relative");       }else{       console.log("keyboard closed");       $(".copyright_link").css("position","fixed");       }   }); }); 

Answer 2

if($(document.activeElement).attr('type') == "text"){
    console.log("Keyboard is visible");
}else{
    console.log("Keyboard is not visible");  
}

Answer 3

Using jQuery:

var lastWindowWidth = $(window).width(),
    lastWindowHeight = $(window).height();

$(window).resize(function() {

    var newWindowWidth = $(window).width(),
        newWindowHeight = $(window).height();

    if( newWindowHeight > lastWindowHeight && newWindowWidth == lastWindowWidth ) {

        // Keyboard closed
        // ...

    }

    lastWindowWidth = newWindowWidth;
    lastWindowHeight = newWindowHeight;

});

Note that the window resize event (and thus the "Keyboard closed" comment block) may get called several times as the keyboard animates closed. Edit to suit your needs.

Answer 4

The most bullet prof solution that works across Chrome/Safari etc.. and on both Android and iOS as of 20-nov-2017 will be to detect a change in the height of a div that has a vh height units (viewport height)

Then on any blur/focus change of an input/textarea check if that div now has a height of 30% less (in pixels) than it used to have before that blur/focus event.

See the code here: Detect virtual keyboard vs. hardware keyboard (its not allowed to copy paste code apparently) Detect virtual keyboard vs. hardware keyboard