input focus in jquery mobile, but keyboard doesn't appear

Question

I'm using jquery,jquery mobile and phonegap. I want to show the keyboard one this page with input type="text".

    <section id="page1" data-role="page">
        <header data-role="header">
            <h1>jQuery Mobile</h1>
        </header>
        <div data-role="content" class="content">

            <input type="text" placeholder="입력하세요" />
        </div>

    </section>

and my script is

        $(document).ready(function(){
            $('input').select();
            $('input').focus();
        });

The text field is focused but the keyboard is not show, and It is lauched when input type="text" is clicked. How can I force to launch the keyboard in javascript or using phonegap plugin?

In case anyone is still curious how to do this on Android: http://stackoverflow.com/questions/9060658/how-to-use-phonegap-softkeyboard-plugin-for-android — wusauarus, Aug 21 '12 at 01:46

score 4 · Answer 1 · answered Jun 06 '12 at 04:33

None of the previous solutions worked for me. However, I noticed that $('textarea').focus().select(); worked after I access the page a second time. So, I force the jquery mobile to data-prefetch my comment box page.

This is my generic JQM initialization code (which doesn't work without 'data-prefetch'):

$('#comment-box-page').live('pageshow', function () {
   $('textarea').focus().select();
});

On the list page there is a fake image of a small text box, that redirects to comment-box.html, which is just a big test area with post and cancel buttons.

        <div data-role="footer" data-position="fixed" data-theme="b" data-tap-toggle="false">
        <div data-role="fieldcontain">
            <a href="comment-box.html" data-prefetch><img src="fake-textfield.jpg"/>
            </a>
        </div>
    </div>

data-prefetch is what is making the difference. When you click the link, the page will behave as it was the second time you visited it, enabling focus and bringing the keyboard up.

Would there be any way you could paste a working example of this on jsfiddle, etc or at least a whole basic example on here that I can see how it works - I couldn't quite get your example working. — fakeguybrushthreepwood, Nov 12 '12 at 03:48

score 3 · Answer 2 · answered Oct 29 '11 at 10:14

3

you can't. the mobile browser don`t show the keyboard if you focus an input element. The user has to tap the input element.

answered Oct 29 '11 at 10:14

Daniel Kurka

7,973
2
24
43

4

And what sense would it make to place the focus on an input field that requires text input and to have no way to enter the text input into the control? – Obi Wan Oct 04 '13 at 19:58

score 1 · Answer 3 · answered May 27 '12 at 12:58

1

You have to use the "click" event to open the keyboard:

$(document).live('click', function() {
    $("#input-element-id").focus();
});

answered May 27 '12 at 12:58

Christian Strang

8,470
5
42
53

score 0 · Answer 4 · answered Jun 28 '16 at 11:06

i use this in cordova 6 for android mobile app and its works:

-install cordova plugin keyboard: cordova plugin add cordova-plugin-keyboard

-then u can use Keyboard.show() to show keyboard and keyboard.hide() to hide it

u can do this to show keyboard:

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

  $('#your_text_input').keydown(function(e) {
  if (e.which == 13) { //Enter keycode
    //your action
    ...

    // Now clear input and set focus back to input
    Keyboard.hide();
    $(this).val('').trigger("keyup").focus();
  }
  });

score -2 · Answer 5 · answered Dec 06 '13 at 14:18

-2

$("input").bind( "blur", function () {
       $(".ui-header-fixed" ).css("top","0 !important");
});

answered Dec 06 '13 at 14:18

dheerendra

537
6
8

input focus in jquery mobile, but keyboard doesn't appear

5 Answers5

Linked