简体   繁体   中英

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.

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM