Question

当我关注文本输入时，我遇到了显示Android键盘的问题。我在我的函数中有这个初始化页面：

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

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

我被告知提示符（）会显示键盘。但事实并非如此。我只获取输入以在页面加载时显示闪烁的光标。如果我想要显示键盘，我必须再次点击输入。我想在页面加载时正确显示键盘。有什么想法吗？感谢。

Answer 1

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

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

Answer 2

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

你不能，至少不能在iOS（iPhone），我相信Android   好。这是一个可用性问题，不应该允许键盘   除了用户输入之外被触发（如果是这样，那就太烦人了   自动）。

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

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

Answer 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：

＆＃13;

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

＆＃13;

登录对话框打开后，焦点将通过click()事件发送到文本框。它在加载所有元素后执行，focus()会调出键盘，以便用户立即开始输入。

怀疑可以使用pagecontainerload在页面加载时完成类似的操作。

Answer 4

我在Cordova 6 for Android移动应用程序中使用以下程序，并且可以确认它是否有效：

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

您可以这样做以显示键盘：

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

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

输入焦点上的jQuery Mobile Show键盘

5 个答案: