jQuery Mobile 在输入框获得焦点时显示键盘

Question

当我聚焦文本输入时，我的Android键盘无法正常显示。在初始化页面的函数中，我已经添加了以下内容：

jQuery(document).bind('pageshow', function()
{
    jQuery($inputItemReference).focus();
    jQuery($inputItemReference).prompt();
});

$inputItemReference 是指向输入文本框的变量。

我曾被告知 prompt() 会显示键盘。然而，它并没有。页面加载时我只看到输入框中的闪烁光标。如果我想要显示键盘，我必须再次点击输入框。我希望页面加载时就能立即显示键盘。有什么想法吗？谢谢。

- snowfi6916

---

你能具体说明在 Android 上你使用哪些浏览器进行测试吗？ - Twisty

我使用的是自带的标准Android浏览器（当我检查浏览器版本时，它显示为v4）。我还在客户端使用Surefox进行锁定，尽管其名称中含有Firefox，但它是基于Android而不是Firefox。 - snowfi6916

我创建了一个jsfiddle来帮助测试：http://jsfiddle.net/Twisty/Mp8wb/ 到目前为止，我看到的活动与您描述的相同。 - Twisty

找到类似的请求：https://dev59.com/U2sz5IYBdhLWcg3wYGvQ - Twisty

Answer 1

如果你正在使用Cordova/PhoneGap，请将以下内容添加到config.xml文件中：

<preference name="KeyboardDisplayRequiresUserAction" value="false" />

- des1001

Answer 2

根据这个答案在javascript中显示虚拟键盘的方法，这并不容易。

引用： 你不能在iOS（iPhone）上这样做，我相信Android也是一样的。这是一个可用性问题，除非用户输入，否则不应该允许触发键盘（如果自动触发，那只是很烦人）。 我知道有几种方法可以解决这个问题： - prompt()打开键盘 - 如果你从一个.click()事件中触发了.focus()（例如从打开对话框），键盘就会出现。

- Twisty

---

我尝试了这个方法，但是没有起作用。它仍然表现出聚焦输入框但不显示键盘的行为。这是我所做的：`jQuery($inputItemReference).click(function() { jQuery($inputItemReference).focus(); jQuery($inputItemReference).prompt(); }); jQuery(document).on('pageshow', function() { jQuery($inputItemReference).trigger('click'); });` - snowfi6916

此外，我的控制台告诉我jQuery(...).prompt()不是一个函数。 - snowfi6916

那正是我也在阅读的内容。没有自动打开的方式，但当你第二次将焦点放在该字段上时，它似乎可以工作。也许诀窍在于一系列事件，例如聚焦、失焦和再次聚焦？如果您能发布当前的示例代码或测试代码，我们可以进一步研究它。 - Twisty

YouTube的移动网站可以做到这一点。 - Donal Rafferty

好的，我想我找到了一种解决方法，但并不是最好的。我查看了YouTube移动版，并没有找到一个不需要用户交互就可以打开键盘的地方。@DonalRafferty如果您有异议，请给我发送一个示例。这个fiddle做了他们所做的事情：http://jsfiddle.net/Twisty/knoohfwt/2/ 点击“开始”将焦点放在text1上，键盘会出现。这似乎是唯一的方法。对于登录页面，可以将表单放在对话框中，并在对话框打开后设置焦点。这将同时打开登录表单并弹出键盘。 - Twisty

Answer 3

好的，我找到了一种方法来实现这个功能。在安卓上测试了Chrome浏览器。这是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>

当登录对话框打开时，通过click()事件将焦点发送到文本框。这个事件在所有元素加载完成后执行，focus()会弹出键盘，使用户可以立即开始输入。

怀疑在页面加载时可以使用pagecontainerload来实现类似的功能。

- Twisty

Answer 4

我在 Cordova 6 中针对 Android 移动应用使用以下过程，并确认它有效：

首先，安装 Cordova 插件键盘。 然后可以分别使用 Keyboard.show() 和 keyboard.hide() 来显示和隐藏键盘。

您可以执行此操作以显示键盘：

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

- rara83

Answer 5

// 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