13

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.

snowfi6916
  • 697
  • 4
  • 9
  • 21
  • Can you specify what browsers you are using to test with on Android? – Twisty Jan 16 '13 at 20:45
  • Just the standard Android browser that comes with my tablet (v4 it says when I check the browser version). I am also using Surefox to lock it down on the client side, which despite its name is Android based, not Firefox based. – snowfi6916 Jan 16 '13 at 21:00
  • I created a jsfiddle to help test: http://jsfiddle.net/Twisty/Mp8wb/ So far I have seen the same activity as you described. – Twisty Jan 16 '13 at 21:25
  • Found similar request: http://stackoverflow.com/questions/7936827/input-focus-in-jquery-mobile-but-keyboard-doesnt-appear – Twisty Jan 17 '13 at 01:15

5 Answers5

6

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

<preference name="KeyboardDisplayRequiresUserAction" value="false" />
des1001
  • 61
  • 1
  • 2
1

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

Community
  • 1
  • 1
Twisty
  • 30,304
  • 2
  • 26
  • 45
  • I did this and it didn't work. It is still giving me the same behavior of focusing the input but not displaying the keyboard. Here is what I did: `jQuery($inputItemReference).click(function() { jQuery($inputItemReference).focus(); jQuery($inputItemReference).prompt(); }); jQuery(document).on('pageshow', function() { jQuery($inputItemReference).trigger('click'); });` – snowfi6916 Jan 17 '13 at 13:35
  • Also, my console is telling me that jQuery(...).prompt() is not a function. – snowfi6916 Jan 17 '13 at 13:52
  • Not finding much info on `.prompt()`. I am unsure why it is suggested in other threads. If you get this to work, it does not look like it would work for all devices due to the security concerns it raises opening the keyboard on the device. – Twisty Jan 18 '13 at 01:04
  • Still working on it. I got it to focus, and then if I click anywhere on the page, it focuses the input again and the keyboard pops up. But I still need to click somewhere to get it to pop up. – snowfi6916 Jan 18 '13 at 13:24
  • That was what I was reading as well. There was no way to auto-open it, yet when you brought focus to the field on the second attempt, it appears to work. Maybe the trick is a series of events. such as focus and blur and focus again? If you can post your current example code or test code, we can work on it some more. – Twisty Jan 21 '13 at 18:57
  • 1
    The youtube mobile website can do this. – Donal Rafferty May 13 '14 at 13:56
  • Updated jsfiddle for this: http://jsfiddle.net/Twisty/knoohfwt/1/ So far no luck. – Twisty Feb 02 '15 at 16:49
  • 2
    Ok, I think I found a way to work this, but it's not exactly the best. I looked at YoutTube Mobile and didn't find a place where the keyboard is not brought up without user interaction. @DonalRafferty please send me an example if you disagree. This fiddle does what they do: http://jsfiddle.net/Twisty/knoohfwt/2/ Clicking Start brings focus to text1 and the keyboard is present. It seems to be the only way to do this. for a login page, could put the form in a dialog and set focus after the dialog is open. This will bring up the login form and bring up the keyboard all at once. – Twisty Feb 02 '15 at 17:15
0

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.

Twisty
  • 30,304
  • 2
  • 26
  • 45
0

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();
});
Gjermund Dahl
  • 1,410
  • 17
  • 25
rara83
  • 1
  • 2
-2
// 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);
});
user4836014
  • 1