Обнаружение виртуальной клавиатуры и аппаратной клавиатуры

Ответ 1

Я не думаю, что переопределяющая экранная клавиатура по умолчанию - хорошая идея, и я бы рекомендовал пойти с тем, что предложил Яни, - тоже адаптируются виртуальные клавиатуры.

Но я уверен, что можно обнаружить большинство клавиатур с событием resize в сочетании с фокусом на поле или путем мониторинга window.innerHeight (или некоторой другой [az] * Height) и сравнения значений до и после поля фокус.

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

Ответ 2

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

Атрибуты формы HTML5 могут использоваться для запуска различных типов клавиатур. Например, <input type="email">, <input type="number"> и <input type="tel"> будут запускать соответствующие типы клавиатур в iOS (не уверены в Android/WinPho/other, но я бы предположил, что он делает то же самое), позволяя пользователю вводить данные больше легко.

Если вы хотите, вы можете дополнительно предложить кнопку для запуска пользовательского numpad под текстовым полем для старых мобильных браузеров, не совместимых с HTML5. В качестве стандартных текстовых полей будут отображаться новые поля HTML5.

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

Ответ 3

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

Вот маленький маленький script, который использует jquery

Если они не являются мобильными, введите стандартное поле ввода.

Если они мобильны, они не отображают поле ввода (поэтому они не получают виртуальную клавиатуру), вместо этого есть скрытое поле или список, который обновляется с помощью jquery, когда они нажимают кнопки для вашего пинпада.

Ответ 4

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

Тайм-аут на jQuery hover (touch)

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

$(document).ready(function() {

    function hasTouch() {
        try {
           document.createEvent("TouchEvent");
           return true;
        } catch (e) {
           return false;
        }    
    }

    var touchPresent = hasTouch();
});

Ответ 5

WURFL - это серверная платформа, которая предлагает вам много информации о возможностях запрашивающего устройства. С помощью wurfel ваше приложение сможет обслуживать различные устройства/группы устройств с оптимизированным выходом/разметкой.

Одним из самых простых сценариев было бы разграничение между рабочими столами, таблицами и смартфонами.

База данных (xml файл) обновляется регулярно, а официальные api доступны для java, php и .net

Ответ 6

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

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

CSS

#height-div{height: 10vh;}

JQuery

$(document).ready(function() {
    var initialHeight = $("#height-div").height();//gives current height in pixels! We save it for later comparisons 
}

Теперь вот волшебство:

$("input, textarea").focus(function(){
        setTimeout(function(){
            if((initialHeight*0.7) > $("#height-div").height()){//if the current viewport height is smaller than 70% of the original size, it means that the keyboard is up
                //ENTER YOUR LOGIC HERE
            }else if((initialHeight*0.7) < parent.$submit.height()){//if the current viewport height is larger than 70% of the original size, it means that the keyboard is down
            //ENTER YOUR LOGIC HERE
            }
        },500);
});

$("input, textarea").blur(function(){
        setTimeout(function(){
            if((initialHeight*0.7) > $("#height-div").height()){//if the current viewport height is smaller than 70% of the original size, it means that the keyboard is up
                //ENTER YOUR LOGIC HERE
            }else if((initialHeight*0.7) < parent.$submit.height()){//if the current viewport height is larger than 70% of the original size, it means that the keyboard is down
            //ENTER YOUR LOGIC HERE
            }
        },500);
});