How can I bring up the keyboard on mobile devices to catch the input for drawing on an HTML5 canvas?

Question

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.

Accepted Answer

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.

How can I bring up the keyboard on mobile devices to catch the input for drawing on an HTML5 canvas?

Solution

Problem

Related problems