如何让移动浏览器（iOS、Android 中的 webkit）显示其软键盘
我正在编写一个小型 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>
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.
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.
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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
不幸的是，在大多数情况下，系统会测试用户是否触发该事件（例如单击）以显示软件键盘。这使得无法按需显示软键盘。
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.