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

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

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

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

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

Есть несколько замечаний:

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

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


javascript jquery soft-keyboard
person L84    schedule 07.07.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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);
    }
});
person Modelcroissant    schedule 07.07.2015
comment
Это не работает на iOS. Я где-то читал (сейчас не могу найти источник), что с iOS 8 (возможно, 6 или 7) клавиатура не вызывает событие изменения размера. - person L84; 08.07.2015
comment
@Lynda Надеюсь, это решение поможет. - person Modelcroissant; 09.07.2015
comment
К сожалению, это все еще не работает. По крайней мере, на iPad (у вас нет устройства Android, чтобы протестировать его). - person L84; 09.07.2015