8
votes

Comment concentrer un champ de saisie sur le navigateur Android via JavaScript ou JQuery

J'ai essayé $ ('# champ'). Focus () Code> et toute autre méthode trouvée sur Internet. Rien n'a fonctionné. J'ai un simple HTML qui reproduit le problème.

<!DOCTYPE html> 
<html> 
    <head> 
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#field').focus();
            });
    </script>
</head> 
<body>
    <input type="text" id="field" name="field"/>
</body>
</html>


9 commentaires

Il n'y a aucune raison que cela ne devrait pas fonctionner, sauf si vous utilisez JQuery Mobile. JQuery Mobile change le cycle de vie DOM de ce que vous attendez normalement.


Je n'utilise pas JQuery Mobile, tout simplement JQuery. Voir l'exemple.


On peut sûrement être fait, je le vois sur la page de recherche de Google, lorsque vous appuyez sur la flèche sur les suggestions. Mais ils ont réduit leur JS, je ne comprends pas comment ça se fait.


Avez-vous essayé de placer l'appel de méthode #focus () dans un événement de navigateur Rappel pour voir FI TI fonctionne de cette façon? Je ne comprends pas pourquoi la version Android de WebKit s'écarterait de la version chromée de cette manière ... Cela pourrait aider à avoir un cas où il ne s'écarte pas du comportement attendu afin de comprendre le cas où il fait.


Alternativement, avez-vous essayé d'envelopper l'appel dans une fonction anonyme à exécuter dans l'appel à document.ready () ? Par exemple: $ (document) .Ready (fonction (Fonction () {(fonction (fonction () {$ (champ #). Focus ();});});}); La fonction anonyme soumise à une exécution immédiate résout des problèmes de JS inexplicables aléatoires.


Bonjour, merci pour les suggestions, mais ils n'ont pas travaillé. Ce problème est retardé. J'ai un champ de saisie de texte et des boutons (suggestions de mots à ajouter à l'entrée). Sur le bouton Cliquez sur le bouton, j'appelle la valeur du bouton dans le champ de saisie et appelle la mise au point sur le champ de saisie. Aucun signe de mise au point n'est affiché (pas de curseur, pas de bordure orange, rien). Le clavier logiciel Android reste allumé et si l'utilisateur appuie une clé, l'accent est mis à retrouver et tout va bien. Je n'ai pas ce problème sur iOS.


À ce stade, je vais aléager une suppression et dire que c'est une étrangeté dans la mise en œuvre de WebKit Android. Désolé que ce n'est pas plus utile. :-)


J'aimerais que cela ait une réponse, je ne peux pas comprendre une solution pour Android OS 2.2, 2.3 ou 4.0+


Avez-vous essayé de déclencher un clic sur le champ de saisie au lieu de vous concentrer?


3 Réponses :


3
votes

En réalité, la fonction JavaScript General "Focus" est désactivée dans le navigateur Android. Par conséquent, la fonction de mise au point de jQuery est désactivée car elle utilise ce qui précède.


1 commentaires

Pouvez-vous relier une source de plus d'informations à ce sujet ou une solution de contournement?



1
votes

Si vous le liez à un autre événement de clic, cela fonctionnera. Cela fonctionne pour moi:

    $(document).ready(function()
    {

       $('#field').click(function(e){ $(this).focus(); });

            $('body').click(function(e)
            {
                $('#field').trigger('click');
            })
    })   


0 commentaires

0
votes

Cliquez () CODE> ou FOCUS () CODE> Seul est pas assez fort>. Vous devez FOCUS () CODE> TU Cliquez sur () CODE>. Méfiez-vous des boucles sans fin si votre script est déclenché par un onclick () sur un élément contenant. Le script ci-dessous fonctionne pour moi sur Chrome pour Android 58 et Safari Mobile 602.1. Clavier souple qui passe bien.

var target = document.getElementsByTagName("input")[0];

if (event.target != target) {
    target.focus();
    target.click();
}


0 commentaires