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>