Клавиатура мобильного дисплея jQuery для фокуса ввода

У меня возникла проблема с отображением клавиатуры Android, когда я фокусирую текстовый ввод. У меня есть это в моей функции, которая инициализирует страницу:

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

$inputItemReference - это переменная, указывающая на входное текстовое поле.

Мне сказали, что prompt() отобразит клавиатуру. Однако это не так. Я получаю только вход для отображения мигающего курсора при загрузке страницы. Если я хочу, чтобы клавиатура отображалась, я должен снова нажать на вход. Я хочу, чтобы клавиатура отображалась прямо при загрузке страницы. Есть предположения? Спасибо.

Ответ 1

Если вы используете cordova/phonegap, добавьте это в config.xml:

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

Ответ 2

На основе этого ответа Показывать виртуальную клавиатуру на мобильных телефонах в javascript, это нелегко.

Вы не можете, по крайней мере, не в iOS (iPhone), и я считаю Android как Что ж. Это проблема юзабилити, которую нельзя разрешить клавиатуре для запуска, за исключением ввода пользователем (это просто раздражает, если это автоматический).

Есть несколько способов, которыми я знаю, чтобы обойти это:

prompt() открывает клавиатуру Если вы запускаете .focus() изнутри события .click() (например, открываете диалоговое окно), клавиатура показывает

Ответ 3

Хорошо, поэтому я нашел способ сделать это в определенной степени. Протестировано в Chrome на Android. Вот 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>

Ответ 4

Я использую следующую процедуру в Кордове 6 для мобильного приложения 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);
});