CODEWITHSUNDEEP
keyboardjquery-mobilecordova
Taewan Hwang
Taewan Hwang

Reputation: 271

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

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?

Upvotes: 27

Views: 33925

Answers (5)

rara83
rara83

Reputation: 1

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

Upvotes: 0

dheerendra
dheerendra

Reputation: 537

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

Upvotes: -2

Franklin Dattein
Franklin Dattein

Reputation: 530

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.

Upvotes: 4

Christian Strang
Christian Strang

Reputation: 8530

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

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

Upvotes: 1

Daniel Kurka
Daniel Kurka

Reputation: 7985

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.

Upvotes: 3

Related Questions