Show Virtual Keyboard on Mobile Phones in JavaScript

Show virtual keyboard on mobile phones in javascript

You can't, at least not in iOS (iPhone), and I believe Android as well. It's a usability issue that the keyboard should not be allowed to be triggered except by user input (it's just annoying if it's automatic).

There are a couple of ways I know of to get around this:

• prompt() opens the keyboard
• If you trigger the .focus() from within a .click() event (e.g. from opening your dialog), the keyboard shows up

JQuery show keyboard on mobile with click

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

Show mobile keyboard without input element

I'm afraid you can't open the keyboard without using a input.
For more information you can read the following thread:
Show virtual keyboard on mobile phones in javascript

Manually bringing up keyboard on mobile

Focusing on input element is what get Mobile to show keyboard.

So you should try to manually focus on some random element which if not needed can be hidden.

See HTMLElement.focus()

focusMethod = function getFocus() {           
  document.getElementById("myTextField").focus();
}

<input type="text" id="myTextField" value="Text field.">
<p></p>
<button type="button" onclick="focusMethod()">Click me to focus on the text field!</button>

jquery mobile how to detect if mobile virtual keyboard is opened

First jQuery Mobile does not have any pre-defined event handler for this case.
You will need to figure out the way yourself.

Android

When virtual keyboard is open, it fires windows resize event.
So you can check if the sum of windows width and height changed to detect keyboard is open or not.

iOS

This does not fire resize event, so simply bind focus and blur event as mentioned by @RamizWachtler

So I have some codes for your here:

You just add your own handling code into onKeyboardOnOff() function.

function onKeyboardOnOff(isOpen) {
    // Write down your handling code
    if (isOpen) {
        // keyboard is open
    } else {
        // keyboard is closed
    }
}

var originalPotion = false;
$(document).ready(function(){
    if (originalPotion === false) originalPotion = $(window).width() + $(window).height();
});

/**
 * Determine the mobile operating system.
 * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'.
 *
 * @returns {String}
 */
function getMobileOperatingSystem() {
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;

      // Windows Phone must come first because its UA also contains "Android"
    if (/windows phone/i.test(userAgent)) {
        return "winphone";
    }

    if (/android/i.test(userAgent)) {
        return "android";
    }

    // iOS detection from: http://stackoverflow.com/a/9039885/177710
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return "ios";
    }

    return "";
}

function applyAfterResize() {

    if (getMobileOperatingSystem() != 'ios') {
        if (originalPotion !== false) {
            var wasWithKeyboard = $('body').hasClass('view-withKeyboard');
            var nowWithKeyboard = false;

                var diff = Math.abs(originalPotion - ($(window).width() + $(window).height()));
                if (diff > 100) nowWithKeyboard = true;

            $('body').toggleClass('view-withKeyboard', nowWithKeyboard);
            if (wasWithKeyboard != nowWithKeyboard) {
                onKeyboardOnOff(nowWithKeyboard);
            }
        }
    }
}

$(document).on('focus blur', 'select, textarea, input[type=text], input[type=date], input[type=password], input[type=email], input[type=number]', function(e){
    var $obj = $(this);
    var nowWithKeyboard = (e.type == 'focusin');
    $('body').toggleClass('view-withKeyboard', nowWithKeyboard);
    onKeyboardOnOff(nowWithKeyboard);
});

$(window).on('resize orientationchange', function(){
    applyAfterResize();
});

Can I trigger Android soft keyboard to open via javascript ( without phonegap )?

Here's a link from StackOverflow:

Showing Android's soft keyboard when a field is .focus()'d using javascript

Just focussing without an event doesnt seem to work. - you DO need a
click event triggering this.

$(document).ready(function() {
    $('#field').click(function(e){
        $(this).focus();
    });
    $('#button').click(function(e) {
        $('#field').trigger('click');
    });
});

Show android keyboard from javascript

I managed to successfully open the virtual keyboard by just calling focus() method of the input.

It works in my app both on android 2.3 and 4.1.

I think the trick is that you have to wait untill the page is completly rendered before you call focus().

My app is using jquery mobile and I call focus() when the pageshow event is triggered:

$("#myPage").on("pageshow", function( event ) {
        $("#myPage").find('input:first').focus();
} );

Or maybe it's working because I'm in a phonegap app?

---

Related Topics