如何在移动设备上打开键盘，以便在HTML5画布上捕获输入用于绘制？

Question

我正在尝试在移动网站上使用javascript / html5 canvas制作填字游戏。我找到了这个库（modit）：https://mod.it/8UmnmJ11，它在桌面上看起来效果很好，但是移动版本没有弹出键盘。

如何在移动设备上弹出键盘以便在HTML5画布上绘制输入内容？

该库使用HTML5 canvas，使得填字游戏具有良好的外观和手感。我知道可以使用div和input来制作这样的填字游戏，但我更愿意修复这个库。

- Bart Burg

---

你找到任何答案了吗？我也很感兴趣。 - Richard Lovejoy

不，我的做法是创建一个隐藏的输入框并将焦点放在上面。然后捕获“keyup”事件。但这是一种“hacky”的解决方案，我认为应该有更好的方法。 - Bart Burg

@BartBurg 那是一个不错的解决方法。谢谢你提到它。此外，这是一个很好的问题，已经被查看了241次，但从未得到点赞。这是怎么回事？ - raddevus

没有头绪，可能是随机（不好的）运气吧？ - Bart Burg

Answer 1

由于这是迄今为止最好的答案，我将把我的评论发布为答案：

我的做法是创建一个隐藏的输入字段并将焦点放在上面。然后捕获keyup事件。但这是一个“hacky”解决方案，我认为应该有更好的方法。

我没有代码了，但我会发布一些未经测试的代码。

HTML：

<input id="hiddenInput" type="text" name="hiddenInput" autofocus />

以下是JavaScript（jQuery）的代码：

$("#hiddenInput").keyup(function(e) {
    if (e.which !== 0) {
       var character = String.fromCharCode(e.which));
       doSomethingWith(character);
    }
});

我不确定css display: none; 是否适用，如果不适用，请使用visibility: hidden; 并通过使用负边距确保它不会推动任何内容。

- Bart Burg