Search

Romua1d.ru
Скрипты

Хак. Как определить, открыта ли клавиатура на телефоне?

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

$(function () {
    initialScreenSize = screen.height, // Текущая высота экрана
        intId = window.setInterval(function () { // Проверяем еще 800 ms 
            if (check()) {
                addClass();
            } else {
                removeClass();
            }
            ;
        }, 800);

    function check() { // сама проверка соответствия
        var kbactive = screen.height;
        if (initialScreenSize !== kbactive) {
            addClass();
            return true;
        } else {
            removeClass();
            return false;
        }
    }

    function addClass() {
        $('body').addClass('keyboard-active');
    }

    function removeClass() {
        $('body').removeClass('keyboard-active');
    }
})

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

Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)

p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне

Romuald Shmidtelson

Web Developer. I have expirience in FrontEnd, Backend, Devops. PHP, Python, Javascript (Vue.js, React.js)

Поделиться
Опубликовано
Romuald Shmidtelson
Теги: javascriptjquery

Недавние Посты

Как получить первый заказ на фрилансе

Получение первого заказа на фрилансе может быть вызовом, особенно для новичков, которые еще не имеют…

1 год назад

Топ 7 css фреймворков 2021 года

Разработка сайтов и веб-приложений стала в наше время неизбежной потребностью. Тем не менее, существует несколько способов…

2 года назад

Что такое семантическое ядро и как его использовать для продвижения сайта?

Компании и специалисты по маркетингу тратят много времени и денег на изучение языка поисковых систем,…

2 года назад

Что такое адаптивные изображения? Как правильно использовать srcset.

Адаптивные изображения - это набор методов, используемых для загрузки правильного изображения в зависимости от разрешения…

3 года назад

Что такое Политика конфиденциальности для сайта и для чего она нужна?

Политика конфиденциальности - это документ, в котором подробно описывается, как компания или организация обрабатывает любую…

3 года назад

Кто такой вебмастер?

В современном мире много специалистов занятых поддержанием работы сайтов, и довольно часто многих из них…

3 года назад