javascript - цифровая - клавиатура закрывает поле ввода android




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

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

Вот небольшой скрипт, который использует jquery

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

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

Я сейчас об этом подумал, и я не могу понять, как справиться с этим. Есть ли способ определить, использует ли пользователь виртуальную (программную) клавиатуру или традиционную (аппаратную) клавиатуру?

Новая Windows Surface имеет собственную клавиатуру в обложке, а для Android / iPad есть тонна различных клавиатур bluetooth.

Итак, у кого-нибудь из вас есть какие-либо сведения об этом?
Я нацелен на Android, IOS и Windows Tablet / Phone.

Мотивация: (очень субъективная)

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

Допустим, вы хотите ввести PIN-код. Вместо того, чтобы клавиатура заполняла половину экрана:

Программная (ОС) клавиатура:

|----------------|
|    [ input]    |
|                |
|----------------|
|  1  2  3  4  5 |
|  6  7  8  9  0 |
|----------------|

Клавиатура JavaScript:

|----------------|
|    [ input]    |
|    | 1 2 3|    |
|    | 4 5 6|    |
|    |_7_8_9|    |
|                |
|                |
|----------------|

Если вам нужно обрабатывать множество входов, возможно, вы хотите сделать наложение div с входами и использовать программную клавиатуру:

|----------------|
| P1 P2    P3 P4 |
| [inp 1][inp 2] |
|----------------|
|    KEYBOARD    |
|                |
|----------------|

Но если у пользователя есть своя аппаратная клавиатура, мы хотим сделать встроенную строку редактирования.

Я смотрел вокруг SO и нашел это сообщение: iPad Web App: обнаружение виртуальной клавиатуры с использованием JavaScript в Safari? ... но этот шов работает только в IOS - не уверен в браузере.


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

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

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

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


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

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

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


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

Время ожидания на jQuery hover (touch)

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

$(document).ready(function() {

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

    var touchPresent = hasTouch();
});




tablet