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.

Judge with `$(document.activeElement).attr('type') === 'text'`. Referred http://stackoverflow.com/questions/14902321/how-to-determine-if-a-resize-event-was-triggered-by-soft-keyboard-in-mobile-brow — Chemical Programmer, Aug 25 '15 at 03:45

score 24 · Accepted Answer · answered Feb 02 '15 at 06:48

24

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

answered Feb 02 '15 at 06:48

suish

3,253
1
15
34

2

It works only in case if i didnt rotate the device portrait to landscape or vice versa. because var _originalSize = $(window).width() + $(window).height() ; differ in landscap & portait mode ,so its triggering unnecessary position of footer as per above code. accordingly now i suppose to looking for keyboard event only ..is there any?? – Nitin Gite Feb 02 '15 at 15:55
try something like $(window).width() + $(window).height() < _originalSize - 50 to avoid that.which is bigger than gap between landscape mode and portrait mode and smaller than the keyboard height. – suish Feb 02 '15 at 23:11
1

What is about the address bar in the mobile browsers? Some browsers hide it on scroll and the viewport height changes – Honsa Stunna Jul 13 '18 at 12:32
resize event can happpen due to multiple reasons and detecting keyboard change from it is not that much good idea. – Talk is Cheap Show me Code May 02 '19 at 05:12

score 9 · Answer 2 · answered Oct 27 '15 at 10:38

9

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

answered Oct 27 '15 at 10:38

Alfaz Jikani

325
3
8

16

On android you can hide keyboard by tapping the triangle ('hide keyboard button'). The input will stay active. – Lambder May 19 '16 at 10:25
1

Thats the real issue and needs solution for that triangle hide keyboard button. – Talk is Cheap Show me Code May 02 '19 at 05:12

score 6 · Answer 3 · answered Mar 27 '17 at 06:51

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.

score 2 · Answer 4 · answered Nov 20 '17 at 17:14

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

score 0 · Answer 5 · answered May 05 '17 at 13:14

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

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

5 Answers5

Linked