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

问题

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.

回答1:

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.

来源：https://stackoverflow.com/questions/21406781/how-can-i-bring-up-the-keyboard-on-mobile-devices-to-catch-the-input-for-drawing