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 o

Answer 1

Hi here is one of the solution which worked for me to check if keyboard is active in mobile devices.

In the below code "#Email" is the id of the input field I am using.

   $(window).resize(function () { //checking for window resize event

    if($(window).width() < 414){ //checking for window width
         if($("#Email").is(":focus")){
             $('.content').css({'margin-top': -15 + 'px'});
             $('.footer').css({'margin-bottom': -100 + 'px'});
         }
    }});

Answer 2

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 3

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

Answer 4

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 5

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