I'm trying to make a crossword puzzle in javascript / html5 canvas which works on a mobile website. I found this library (modit): https://mod.it/8UmnmJ11 which seems to work well and look good on the desktop, but the mobile version doesn't bring up the keyboard.
How can I bring up the keyboard on mobile devices to catch the input for drawing on an HTML5 canvas?
The library makes use of HTML5 canvas, which gives the puzzle a nice look and feel. I know I can make such a crossword puzzle with divs and inputs, but I'd rather go for fixing this library.
Since it's the best answer so far, I'll post my comment as answer:
What I did was create a hidden input field and get the focus on that. Then catch the keyup-event. But it's a "hacky" solution and I think there should be a better way.
I don't have the code anymore but I'll post some untested code.
Html:
<input id="hiddenInput" type="text" name="hiddenInput" autofocus />
And the javascript (jQuery):
$("#hiddenInput").keyup(function(e) {
if (e.which !== 0) {
var character = String.fromCharCode(e.which));
doSomethingWith(character);
}
});
I'm not sure if the css display: none; would work well, in that case use visibility: hidden; and make sure it won't push any content by using a negative margin.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With