Определить, когда используется мягкая клавиатура. Abd Запустить функцию JS?

Question

У меня есть сайт, который открывает модальный клик, содержащий форму. Я заметил на своем iPad, что когда открыта мягкая клавиатура, она закрывает несколько полей формы, и поскольку я приближаюсь к нижней части экрана, я не могу прокрутить, чтобы открыть эти скрытые поля.

При исследовании этой проблемы я столкнулся с this answer, которая включает в себя код от this answer. Однако ни один из этих ответов не работает при тестировании на iOS 8.3.

Вот что я хотел бы достичь:

• Detect, когда клавиатура открыта.
• Найдите высоту клавиатуры.
• Добавьте дополнение к нижней части нижнего колонтитула для размещения высоты клавиатуры.
• Когда клавиатура отклоняется или закрывается, отступы удаляются.

Есть несколько вещей, чтобы отметить:

• Если кто-то использует подключенную клавиатуру (в том числе блютуз клавиатуры) ничего, как мягкая клавиатура не должна появиться
• JQuery не делать хорошо использовать.
• Решение должно быть работать по коду клиента.
• Я предпочитаю решение, которое охватывает iOS и Android. Предпочтительно, любое устройство, которое может использовать мягкую клавиатуру.

Как я могу достичь решения, которое увеличит заполнение в нижнем колонтитуле, которое будет работать на большинстве устройств, когда кто-то использует мягкую клавиатуру в качестве средства заполнения формы в модальном режиме?

Answer 1

Я столкнулся с проблемой, подобной этому не так давно, и я нашел небольшое решение для этого, когда мобильный или планшет используется, и клавиатура активирована, он вызывает событие изменения размера экрана, чтобы вы могли использовать что для запуска функции.

var lastHeight = $(window).height(); // store the intial height. 
var lastWidth = $(window).width(); // store the intial width. 
var keyboardIsOn = false; 

$(window).resize(function() { 
    if ($("input").is(":focus")) { 
     keyboardIsOn = 
      ((lastWidth == $(window).width()) && (lastHeight > $(window).height())); 
    } 
    if(keyboardIsOn){ 
     var keyboardHeight = lastHeight - $(window).height(); 
     $("footer").css("padding", keyboardHeight+"px"); 
    } else{ 
     $("footer").removeAttr("style"); 

     //or if you just want to remove the padding 
     //$("footer").css("padding", 0); 
    } 
}); 

//An alternative solution is by checking if the height of the screen 
//change on input/textarea focus. 

$('input, textarea').focus(function() { 
    keyboardIsOn = 
      ((lastWidth == $(window).width()) && (lastHeight > $(window).height())); 
    if(keyboardIsOn){ 
     var keyboardHeight = lastHeight - $(window).height(); 
     $("footer").css("padding", keyboardHeight+"px"); 
    } else{ 
     $("footer").removeAttr("style"); 

     //or if you just want to remove the padding 
     //$("footer").css("padding", 0); 
    } 
});