web-dev-qa-db-fra.com

jQuery Mobile Show Keyboard sur le focus d'entrée

Je ne parviens pas à faire apparaître le clavier Android lorsque je cible une saisie de texte. J'ai ceci dans ma fonction qui initialise la page:

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

$ inputItemReference est une variable qui pointe vers la zone de texte d'entrée.

On m'a dit que Prompt () montrerait le clavier. Cependant, ce n'est pas le cas. Je reçois seulement l'entrée pour afficher le curseur clignotant lorsque la page est chargée. Si je veux que le clavier soit affiché, je dois taper à nouveau sur l'entrée. Je veux que le clavier soit bien affiché au chargement de la page. Des pensées? Merci.

jquery-mobilekeyboardfocus
12
snowfi6916

Si vous utilisez cordova/phonegap, ajoutez ceci à config.xml:

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

Sur la base de cette réponse, Afficher le clavier virtuel sur les téléphones mobiles en javascript , ce n'est pas immédiatement possible.

Vous ne pouvez pas, du moins pas sur iOS (iPhone), et je crois bien qu'Android donne Bien. Le fait que le clavier ne soit pas autorisé à déclencher le clavier Ne doit pas être déclenché, sauf par la saisie de l'utilisateur (c'est simplement gênant si c'est Automatique).

Je connais deux façons de contourner ce problème:

Prompt() ouvre le clavier Si vous déclenchez .focus() à partir d'un événement .click() (par exemple, en ouvrant votre boîte de dialogue), le clavier s'affiche.

1
Twisty

Ok, alors j'ai trouvé un moyen de faire cela dans une certaine mesure. Testé sur Chrome sur Android. Voici le 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>

Lorsque la boîte de dialogue de connexion s'ouvre, le focus est envoyé à la zone de texte via un événement click(). Ceci est exécuté une fois que tous les éléments ont été chargés. La focus() fait apparaître le clavier afin que l'utilisateur puisse commencer à taper tout de suite.

Vous pensez que quelque chose de similaire peut être fait lors du chargement de page avec pagecontainerload.

0
Twisty

J'utilise la procédure suivante dans l'application mobile Cordova 6 pour Android et je peux confirmer que cela fonctionne:

Commencez par installer le clavier du plug-in Cordova. Ensuite, vous pouvez afficher et masquer le clavier avec respectivement Keyboard.show() et keyboard.hide().

Vous pouvez le faire pour afficher le clavier:

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