CODEWITHSUNDEEP
jquery-mobilekeyboardfocus
snowfi6916
snowfi6916

Reputation: 699

jQuery Mobile Show Keyboard on Input Focus

I am having a problem getting the Android keyboard to show up when I focus a text input. I have this in my function that initializes the page:

jQuery(document).bind('pageshow', function()
{
    jQuery($inputItemReference).focus();
    jQuery($inputItemReference).prompt();
});

$inputItemReference is a variable that points to the input text box.

I was told that prompt() would show the keyboard. However, it does not. I am only getting the input to display the blinking cursor when the page loads. If I want the keyboard to be displayed, I have to tap the input again. I want the keyboard to be displayed right when the page loads. Any thoughts? Thanks.

Upvotes: 13

Views: 40102

Answers (5)

rara83
rara83

Reputation: 1

I use the following procedure in Cordova 6 for Android mobile app, and can confirm that it works:

First, install the Cordova plugin keyboard. Then you can show and hide the keyboard with Keyboard.show() and keyboard.hide(), respectively.

You can do this to show the keyboard:

$("#your_input").click(function () {
    $(this).focus();
    Keyboard.show();
});

Upvotes: 0

user4836014
user4836014

Reputation: 1

// Place an empty div at the bottom of your page
<div class="keyboard" style="height: 0">&nbsp;</div>

$("input").click(function () {
    $("#" + this.id).focus();
});
$("input").focus(function () {
    $(".keyboard").css("height", "300");// The height of your keyboard
    window.scrollTo(0, 5000); // Scroll to the bottom of the page
});
$("input").blur(function () {
    $(".keyboard").css("height", "0");
    window.scrollTo(0, 0);
});

Upvotes: -2

Twisty
Twisty

Reputation: 30899

Ok, so I found a way to do this to a degree. Tested on Chrome on Android. Here is the jsFiddle: http://jsfiddle.net/Twisty/x0tcr5ph/2/

JQuery:

$(document).on("pageshow", "#loginDialog", function () {
    // When entering loginDialog
    $("label:first").click();
});
$(function () {
    $("#startBtn").click(function () {
        $.mobile.changePage('#loginDialog', 'pop', true, true);
    });
});

HTML:

<div data-role="page">
    <div data-role="header" data-theme="b">
         <h1>Test Focus onLoad</h1>
    </div>
    <div data-role="content"> <a href="#" id="startBtn" data-role="button">Login</a>
    </div>
</div>
<div id="loginDialog" data-role="dialog">
    <div data-role="header" data-theme="b">
         <h2>Login</h2>
    </div>
    <div data-role="content">
        <form>
            <label for="text1">User</label>
            <input type="text" name="login" id="text1" />
            <label for="text2">Password</label>
            <input type="password" name="pass" id="text2" />
            <button type="submit">Submit</button>
        </form>
        <script>
            $("label:first").click(function() {
                $("#text1").focus();
            });
        </script>
    </div>
</div>

When the login dialog opens, focus is sent to the textbox through a click() event. This it executes after all the elements are loaded, the focus() does bring up the keyboard so the user can begin typing right away.

Suspect something similar can be done on page load with pagecontainerload.

Upvotes: 0

des1001
des1001

Reputation: 61

If you are using cordova/phonegap add this to config.xml:

<preference name="KeyboardDisplayRequiresUserAction" value="false" />

Upvotes: 6

Twisty
Twisty

Reputation: 30899

Based on this answer, Show virtual keyboard on mobile phones in javascript, it is not readily possible.

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

Upvotes: 1

Related Questions