Как обнаружить событие show/hide клавиатуры в jQuery для мобильного веб-приложения

Я работаю над веб-базовым мобильным (HTML) приложением. Есть ли способ обнаруживать событие клавиатуры, например, когда клавиатура видна, а клавиатура скрыта, основываясь на том, что я могу контролировать другую компоновку экрана. Я попытался сосредоточиться, размыть, событие изменения размера браузера, но моя проблема не устраняет 100%, поэтому я я ищу только событие клавиатуры, на самом деле я хочу скрыть нижний колонтитул над клавиатурой, когда клавиатура видна поскольку он (нижний колонтитул) появляется над клавиатурой, поэтому я пытаюсь установить нижний колонтитул положение, когда клавиатура видна, и положение нижнего колонтитула как исправлено при смене клавиатуры. я пытался, как показано ниже, но это не может быть 100% -ое разрешение
моя проблема. $ (document).ready(function() {

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

 });       

$("input").blur(function() {

 $(".copyright_link").css("position","fixed");  
});

});

Кто-нибудь может помочь мне решить проблему нижнего колонтитула или сообщить мне, если это событие клавиатуры в jquery

Ответ 1

Вы можете использовать событие resize, чтобы получить, появляется ли клавиатура или нет

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

Ответ 2

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

Ответ 3

Использование 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;

});

Обратите внимание, что событие изменения размера окна (и, таким образом, блок комментариев с закрытой клавиатурой) может вызываться несколько раз, когда клавиатура закрывается. Изменить в соответствии с вашими потребностями.

Ответ 4

Привет, вот одно из решений, которое работало для меня, чтобы проверить, активна ли клавиатура в мобильных устройствах.

В приведенном ниже коде "# Email" - это идентификатор поля ввода, которое я использую.

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

Ответ 5

Самое эффективное решение bullet prof, которое работает в Chrome/Safari и т.д., и на Android и iOS по состоянию на 20 ноября 2017 года будет определять изменение высоты div, у которого есть единицы высоты vh (область просмотра высота)

Затем при любом изменении размытия/фокуса ввода /textarea проверьте, имеет ли теперь этот div высоту на 30% меньше (в пикселях), чем раньше это событие размытия/фокусировки.

Смотрите код здесь: Обнаружение виртуальной клавиатуры и аппаратной клавиатуры (его явно не разрешено копировать код вставки). Обнаружение виртуальной клавиатуры и аппаратной клавиатуры.