javascript - JQuery 通过点击在移动设备上显示键盘

Question

大家好，我正在按照我在网上找到的有关如何制作 Hangmen 游戏的教程进行操作，直到我在移动设备上对其进行测试之前它都很好。我只是无法让虚拟键盘显示在移动设备上，而且我已经尝试过对堆栈上类似问题的其他答案。这是我的代码的一部分:

$(document).on("click", function() {
  $('#dummy').focus();
});
$('#dummy').focus();

#dummy {
  position: absolute;
  left: -200px;
  top: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="topbar">Todemanija</div>
<div class="spacer"></div>
<div id="gameContent"></div>

那么伙计们有没有办法让这个工作。您还可以在此处查看完整的代码 http://www.wpacademy.nextweb.space/TestingMobile/

Answer 1

您需要一个文本输入来聚焦以触发移动键盘。
而且您无法隐藏它，因为隐藏的输入无法聚焦。

但是!我只是想到了一个您可以尝试的想法。

将此添加到您的函数 gameScreen(){:

$('#gameContent').append("<input type='text' id='dummy'>");
$("#dummy").css({"position":"fixed","left":"120%"}).focus();

所以，诀窍是将文本输入放在视口(viewport)之外。

你可以删除这个:

// with this function we add virtual keyboard for mobile users and we do not affect desktop gameplay
$(document).on("click",function() {
    $('#dummy').focus();
});
$('#startButton').click(function(e) {
    $('#dummy').trigger('click');
});

---

编辑

这是一个小补充......
在您添加上一个答案后，我尝试了您的游戏。

如果用户在游戏过程中由于键盘外的 tap 而失去输入焦点:添加它，但在 function gameScreen() 之外(在全局范围内):

函数保持焦点(){

setTimeout(function(){
    $(document).find("#dummy").focus();
},100);

在 function gameScreen() 结束时，保持键盘事件:

$(document).on("touchstart", keepFocus);

在 victoryMessage() 和 function defeatMessage() 结束时，停用键盘:

$(document).off("touchstart", keepFocus);
$("#dummy").blur();

此外，将此添加到您的 start() 函数中:

$(document).on("touchstart", keepFocus);