CODEWITHSUNDEEP
jquery
Nitin Gite
Nitin Gite

Reputation: 293

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

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.

Upvotes: 25

Views: 46473

Answers (5)

TBE
TBE

Reputation: 1133

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

Upvotes: 2

vikas etagi
vikas etagi

Reputation: 635

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'});
         }
    }});

Upvotes: 0

Dan
Dan

Reputation: 864

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.

Upvotes: 6

Alfaz Jikani
Alfaz Jikani

Reputation: 325

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

Upvotes: 9

suish
suish

Reputation: 3343

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");  
    }
  });
});

Upvotes: 24

Related Questions