CODEWITHSUNDEEP
javascriptjquerycssmobilekeyboard
Zvezdas1989
Zvezdas1989

Reputation: 1465

JQuery show keyboard on mobile with click

Hey guys I was following tutorial I found online on how to make Hangmen game and it was fine until I tested it on mobile. I just can't make virtual keyboard to show on mobile and I've already tried other answers to similar questions on stack. This is part of my code: 

$(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>

So guys is there a way to make this work. Also you can see full code in action here http://www.wpacademy.nextweb.space/TestingMobile/

Upvotes: 3

Views: 11305

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

You need a text input to focus on to trigger the mobile keypad.
And you can't hide it, because a hidden input just can't be focussed.

But! I just had an idea you could try.

Add this to your function gameScreen(){:

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

So, the trick is to place the text input outside the viewport.

And you can remove this:

// 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');
});


EDIT

Here is a small addition...
I tried your game after you added the previous answer.

In case the user looses the input focus during the game because of a tap outside the keyboard: add this, but outside function gameScreen() (at global scope):

function keepFocus(){

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

}

At the end of function gameScreen(), to maintain the keyboard active:

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

At the end of victoryMessage() and function defeatMessage(), to deactivate the keyboard:

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

Also, add this in your start() function:

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

Upvotes: 4

Related Questions