jQuery Mobile 在输入焦点上显示键盘答案

【问题标题】：jQuery Mobile Show Keyboard on Input FocusjQuery Mobile 在输入焦点上显示键盘
【发布时间】：2016-06-28 21:52:19
【问题描述】：

我在关注文本输入时无法显示 Android 键盘。我在初始化页面的函数中有这个：

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

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

有人告诉我 prompt() 会显示键盘。但是，事实并非如此。我只得到输入以在页面加载时显示闪烁的光标。如果我想显示键盘，我必须再次点击输入。我希望在页面加载时正确显示键盘。有什么想法吗？谢谢。

【问题讨论】：

您能指定您在 Android 上使用哪些浏览器进行测试吗？
只是我平板电脑随附的标准 Android 浏览器（当我检查浏览器版本时会显示 v4）。我还在使用 Surefox 将其锁定在客户端，尽管它的名称是基于 Android 的，而不是基于 Firefox 的。
我创建了一个 jsfiddle 来帮助测试：jsfiddle.net/Twisty/Mp8wb 到目前为止，我已经看到了与您描述的相同的活动。
发现类似请求：stackoverflow.com/questions/7936827/…

标签： jquery-mobile keyboard focus

【解决方案1】：

如果您使用的是 cordova/phonegap，请将其添加到 config.xml：

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

【讨论】：

【解决方案2】：

基于这个答案，Show virtual keyboard on mobile phones in javascript，这是不可能的。

你不能，至少在 iOS (iPhone) 中不能，我相信 Android 是出色地。不允许使用键盘是一个可用性问题除非由用户输入触发（如果它是自动）。

我知道有几种方法可以解决这个问题：

prompt() 打开键盘如果您从 .click() 事件中触发 .focus()（例如，通过打开对话框），则会显示键盘

【讨论】：

我这样做了，但没有用。它仍然给我同样的行为，即集中输入但不显示键盘。这是我所做的：jQuery($inputItemReference).click(function() { jQuery($inputItemReference).focus(); jQuery($inputItemReference).prompt(); }); jQuery(document).on('pageshow', function() { jQuery($inputItemReference).trigger('click'); });
另外，我的控制台告诉我 jQuery(...).prompt() 不是一个函数。
在.prompt() 上找不到太多信息。我不确定为什么在其他线程中建议它。如果你让它工作，它看起来并不适用于所有设备，因为打开设备上的键盘会引发安全问题。
youtube 移动网站可以做到这一点。
好的，我想我找到了解决这个问题的方法，但这并不是最好的。我查看了YoutTube Mobile，并没有找到没有用户交互不调出键盘的地方。 @DonalRafferty 如果您不同意，请给我一个例子。这个小提琴做了他们所做的事情：jsfiddle.net/Twisty/knoohfwt/2 单击开始将焦点带到 text1 并且键盘存在。这似乎是做到这一点的唯一方法。对于登录页面，可以将表单放在对话框中并在对话框打开后设置焦点。这将调出登录表单并同时调出键盘。

【解决方案3】：

好的，所以我找到了一种在一定程度上做到这一点的方法。在 Android 上的 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 可以在页面加载时完成类似的操作。

【讨论】：

【解决方案4】：

我在 Cordova 6 for Android 移动应用程序中使用了以下过程，并且可以确认它可以正常工作：

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

你可以这样做来显示键盘：

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

【讨论】：

【解决方案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);
});

【讨论】：