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

你需要一个文本输入来专注于触发移动键盘。
而你无法隐藏它，因为隐藏的输入不能被聚焦。

但是！我刚刚有一个想法，你可以尝试。

添加到您的function gameScreen(){：

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

因此，关键是要放置文本输入的视区之外。

而且你可以删除此：

// 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()（在全局范围内）：

功能keepFocus（）{

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);