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?

Answer 1

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.

Answer 2

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.