如何在移动设备上调出键盘以获取在 HTML5 画布上绘图的输入？答案

【问题标题】：How can I bring up the keyboard on mobile devices to catch the input for drawing on an HTML5 canvas?如何在移动设备上调出键盘以获取在 HTML5 画布上绘图的输入？
【发布时间】：2014-01-28 13:23:53
【问题描述】：

我正在尝试在 javascript / html5 画布中制作一个适用于移动网站的填字游戏。我找到了这个库（modit）：https://mod.it/8UmnmJ11，它似乎运行良好，在桌面上看起来也不错，但移动版并没有调出键盘。

如何在移动设备上调出键盘来捕捉输入以在 HTML5 画布上绘图？

该库使用 HTML5 画布，使拼图具有漂亮的外观和感觉。我知道我可以用 div 和输入制作这样的填字游戏，但我宁愿修复这个库。

【问题讨论】：

你找到答案了吗？我也有兴趣。
不，我所做的是创建一个隐藏的输入字段并获得焦点。然后捕捉“keyup”事件。但这是一个“hacky”解决方案，我认为应该有更好的方法
@BartBurg 不过这是一个很好的解决方法。谢谢你提到它。此外，这是一个很好的问题，被浏览了 241 次，但从未被点赞。这有什么关系？
不知道，可能是随机（坏）运气？

标签： javascript jquery html mobile canvas

【解决方案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 是否显示：无；会很好用，在这种情况下使用可见性：隐藏；并确保它不会使用负边距推送任何内容。

【讨论】：