如何让移动浏览器（iOS、Android 中的 webkit）显示其软键盘答案

【问题标题】：How to get mobile browsers (webkit in iOS, Android) to display their soft-keyboards如何让移动浏览器（iOS、Android 中的 webkit）显示其软键盘
【发布时间】：2011-05-11 02:20:55
【问题描述】：

我正在编写一个小型 Web 应用程序，它大量使用 canvas 元素来执行类似于 VNC 的操作。它特别针对 iOS 和 Android 的默认浏览器。

当需要键盘输入时，我可以通过 AJAX 调用进行检测，但我无法说服移动浏览器按需显示其软键盘。我的想法是有一个输入字段，可能隐藏在画布后面，我可以在适当的时候集中注意力，然后监听该输入字段上的关键事件。

问题是当它来自“后台”时，这似乎不起作用，即在 AJAX 调用的成功处理程序上。这是一个独立的测试用例（需要 jQuery，并使用安装在 /focus 的虚拟 ajax 处理程序），它显示了当来自 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>

【问题讨论】：

标签： jquery html mobile keyboard mobile-safari

【解决方案1】：

不幸的是，在大多数情况下，系统会测试用户是否触发了事件（例如单击）以显示软件键盘。这使得无法按需显示软键盘。

【讨论】：

这似乎是我的实验所暗示的，但我希望有一个很好的技巧来解决这个问题。