Как заставить мобильные браузеры (webkit в iOS, Android) отображать свои софт-клавиатуры - PullRequest
Новая
       19

Как заставить мобильные браузеры (webkit в iOS, Android) отображать свои софт-клавиатуры

4 голосов
/ 17 ноября 2010

Я пишу небольшое веб-приложение, которое интенсивно использует элемент canvas для создания чего-то похожего на VNC. Он специально предназначен для браузеров по умолчанию для iOS и Android.

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

Проблема в том, что это, похоже, не работает, когда оно приходит "из фона", то есть в обработчике успеха вызова AJAX. Вот автономный тестовый пример (требует jQuery и использует фиктивный обработчик ajax, установленный на /focus), который показывает, как фокус не всплывает на клавиатуре мобильного браузера при задержке setTimeout или возврат вызова AJAX. Можно ли как-нибудь эффективно заставить клавиатуру всплыть? 

<html>
<head>
<title>Focus Test V1</title>
</head>
<script type="text/javascript" src="jquery.js"></script>
<body>

<div>
<form method="GET" onsubmit='return false;'>
<input type="text" id="kb" />
</form>
</div>

<div>
<button id="focus-direct">Focus Directly</button>
<button id="focus-timeout"">Focus Timeout</button>
<button id="focus-ajax">Focus Ajax</button>
<button id="clear">Clear</button>
</div>

<div id="console"></div>

<script type="text/javascript">
    function init() {
        function append(text) {
            $('<div/>').text(text).appendTo('#console');
        }
        $('#clear').click(function() {
            $('#console').html("");
        });
        $('#focus-direct').click(function() {
            focusKB();
        });
        $('#focus-timeout').click(function() {
            setTimeout(focusKB(), 50);
        });
        $('#focus-ajax').click(function() {
            append("sending...");
            $.ajax( {
                url : '/focus',
                success : function() {
                    append("ajax returned...");
                    focusKB();
                }
            });
        });

        function focusKB() {
            $('#kb').focus();
            append("focusing...");
        }

        setTimeout(focusKB, 3000);
    }
    $(document).ready(init);
</script>

</body>
</html>

1 Ответ

2 голосов
/ 17 ноября 2010

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

...