如何让移动浏览器（iOS，Android中的webkit）显示其软键盘 [英] How to get mobile browsers (webkit in iOS, Android) to display their soft-keyboards
问题描述
我正在编写一个小型的Web应用程序，它大量使用canvas元素来做类似于VNC的事情。它特别针对iOS和Android的默认浏览器。
I'm writing a small web app that makes heavy use of the canvas element to do something similar to VNC. It is especially targeted for the default browsers of iOS and Android.
当需要键盘输入时，我可以通过AJAX调用来检测，但我无法说服移动浏览器按需显示软键盘。我的想法是有一个输入字段，可能隐藏在画布后面，我可以在适当的时候关注焦点，然后监听输入字段上的关键事件。
I can detect via AJAX calls when keyboard input is required, but I'm having trouble convincing the mobile browsers to display their soft keyboards on demand. My thought was to have an input field, perhaps hiding behind the canvas, that I could give focus to when appropriate, and then listen for key events on that input field.
问题在于，当它来自背景时，这似乎不起作用，即在AJAX调用的成功处理程序上。这是一个自包含的测试用例（需要jQuery，并使用安装在 / focus 上的虚拟ajax处理程序），以显示焦点不会弹出移动设备浏览器的键盘来自 setTimeout 延迟或来自AJAX调用的返回。有没有办法让键盘有效地弹出？
The problem is that this doesn't seem to work when it comes "from the background", i.e. on the success handler of an AJAX call. Here is a self-contained test case (requires jQuery, and makes use of a dummy ajax handler mounted at /focus) that shows how the focus doesn't pop up the mobile browser's keyboard when coming from a setTimeout delay or from the return of an AJAX call. Is there any way to get the keyboard to pop-up effectively?
<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>
推荐答案
不幸的是，在大多数情况下，系统测试事件是否由用户触发（例如点击）显示软件键盘。这使得无法按需显示软键盘。
Unfortunately in most cases the system tests if the event is fired by user (eg. a click) to display the software keyboard. This makes it impossible to display the soft-keyboard on demand.
这篇关于如何让移动浏览器（iOS，Android中的webkit）显示其软键盘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
