jQuery Mobile中的输入焦点，但键盘没有出现。

Question

我正在使用jquery，jquery mobile和phonegap。 我想在一个使用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>

我的脚本是

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

文本框已聚焦但键盘未显示，在单击input type="text"时启动。如何在JavaScript或使用PhoneGap插件中强制启动键盘？

- Taewan Hwang

---

如果有人仍然想知道如何在Android上实现这一点：https://dev59.com/AGox5IYBdhLWcg3wpV_F - wusauarus

Answer 1

之前的解决方案对我都没有起作用。但是我注意到当我第二次访问页面时，$('textarea').focus().select();可以正常工作。所以我强制jQuery移动版去对我的评论框页面进行数据预加载。

这是我的通用JQM初始化代码（如果没有'data-prefetch'则无法正常工作）：

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

在列表页面上有一个假的小文本框图像，它会重定向到comment-box.html，这只是一个带有发布和取消按钮的大测试区域。

        <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就是让页面变得不同。当你点击链接时，页面会表现得像你第二次访问它一样，以便让用户更方便地使用键盘和输入框。

- Franklin Dattein

---

你能否提供一个可工作的示例，例如在jsfiddle上粘贴，或者至少在这里提供一个完整的基本示例，以便我可以看到它的工作原理 - 我无法使你的示例正常工作。 - fakeguybrushthreepwood

Answer 2

你不能这样做。如果你专注于一个输入元素，移动浏览器不会显示键盘。用户必须点击输入元素。

- Daniel Kurka

---

把焦点放在需要文本输入的输入框上，却没有办法将文本输入到控件中，这有什么意义呢？ - Obi Wan

Answer 3

您必须使用“click”事件来打开键盘：

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

- Christian Strang

Answer 4

我在 Cordova 6 中使用它来开发 Android 移动应用程序，它可以正常工作：

- 安装 Cordova 插件键盘：cordova plugin add cordova-plugin-keyboard

- 然后您可以使用 Keyboard.show() 来显示键盘，使用 keyboard.hide() 来隐藏它。

您可以使用以下代码显示键盘：

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

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

    // 现在清除输入并将焦点设置回输入框
    Keyboard.hide();
    $(this).val('').trigger("keyup").focus();
  }
  });

- rara83

Answer 5

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

- dheerendra