Hola chicos, estaba siguiendo el tutorial que encontré en línea sobre cómo hacer el juego Hangmen y estaba bien hasta que lo probé en el móvil. Simplemente no puedo hacer que el teclado virtual se muestre en el móvil y ya probé otras respuestas a preguntas similares en la pila. Esto es parte de mi código:
$(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>Así que chicos, ¿hay alguna manera de hacer que esto funcione? También puede ver el código completo en acción aquí http://www.wpacademy.nextweb.space/TestingMobile/
Necesita una entrada de texto para enfocarse para activar el teclado móvil.
Y no puede ocultarlo, porque una entrada oculta simplemente no se puede enfocar.
¡Pero! Acabo de tener una idea que podrías intentar.
Agrega esto a tu function gameScreen(){ :
$('#gameContent').append("<input type='text' id='dummy'>"); $("#dummy").css({"position":"fixed","left":"120%"}).focus(); Entonces, el truco es colocar la entrada de texto fuera de la ventana gráfica.
Y puedes eliminar esto:
// 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 fuera del teclado: agregue esto, pero fuera function gameScreen() (en el ámbito global):función mantenerEnfocar(){
setTimeout(function(){ $(document).find("#dummy").focus(); },100);}
Al final de la function gameScreen() , para mantener activo el teclado:
$(document).on("touchstart", keepFocus); Al final de la función victoryMessage() y function defeatMessage() , para desactivar el teclado:
$(document).off("touchstart", keepFocus); $("#dummy").blur(); Además, agregue esto en su función start() :
$(document).on("touchstart", keepFocus);