web-dev-qa-db-fra.com

Se concentrer par programme sur le champ de saisie suivant dans un safari mobile

J'ai plusieurs champs de saisie en ligne qui agissent comme une ligne de réponse de mots croisés:

enter image description here

Chaque carré possède son propre champ de saisie. La raison en est, entre autres, que parfois un carré peut être prérempli. Maintenant, sur le navigateur de bureau, le curseur passe au champ de saisie suivant chaque fois qu'un caractère est entré. Cela fonctionne très bien en utilisant quelque chose comme:

$(this).next('input').focus();

Mais le problème sur Safari mobile (nous testons sur iOS) est que je ne sais pas comment "sauter" automatiquement par programmation au champ de saisie suivant. L'utilisateur peut le faire via le bouton "suivant", mais existe-t-il un moyen de le faire automatiquement?

Je sais que le déclencheur focus() a certaines limites sur ios, mais j'ai également vu une solution de contournement utilisant des clics synthétisés, etc.

javascriptjqueryiosfocusmobile-safari
29
David Hellsing

J'ai trouvé une solution de contournement qui pourrait fonctionner pour vous.

Apparemment IOS/Safari "accepte" uniquement le focus à l'intérieur d'un gestionnaire d'événement tactile. J'ai déclenché un événement tactile et inséré la .focus() à l'intérieur. J'ai essayé cela sur mon iPhone3S et iPhone5S avec Safari et cela fonctionne:

var focused = $('input:first'); //this is just to have a starting point

$('button').on('click', function () { // trigger touch on element to set focus
    focused.next('input').trigger('touchstart'); // trigger touchstart
});

$('input').on('touchstart', function () {
    $(this).focus();   // inside this function the focus works
    focused = $(this); // to point to currently focused
});

Démo ici
(appuyez sur le bouton suivant dans la démo)

28
Sergio

Il est impossible de passer par programmation au champ de saisie suivant dans un navigateur mobile sans fermer le clavier. (C'est une conception horrible, mais c'est ce avec quoi nous devons travailler.) Cependant, un hack intelligent consiste à échanger les positions, les valeurs et les attributs des éléments d'entrée avec Javascript afin qu'il semble que vous passiez au champ suivant alors qu'en fait vous êtes toujours concentré sur le même élément. Voici le code d'un plug-in jQuery qui échange le id, name et la valeur. Vous pouvez l'adapter pour échanger d'autres attributs si nécessaire. Veillez également à corriger tous les gestionnaires d'événements enregistrés.

$.fn.fakeFocusNextInput = function() {
    var sel = this;
    var nextel = sel.next();
    var nextval = nextel.val();
    var nextid = nextel.attr('id');
    var nextname = nextel.attr('name');
    nextel.val(sel.val());
    nextel.attr('id', sel.attr('id'));
    nextel.attr('name', sel.attr('name'));
    sel.val(nextval);
    sel.attr('id', nextid);
    sel.attr('name', nextname);
    // Need to remove nextel and not sel to retain focus on sel
    nextel.remove();
    sel.before(nextel);
    // Could also return 'this' depending on how you you want the
    // plug-in to work
    return nextel;
};

Démo ici: http://jsfiddle.net/EbU6a/194/

10
Kevin Borders

Ajoutez cette ligne dans votre fichier de configuration dans la section ios

préférence name = "KeyboardDisplayRequiresUserAction" value = "false"

1
Lakshay Sharma

J'espère que c'est ce que vous cherchez-

$(document).ready(function() {
  $('input:first').focus(); //focus first input element

  $('input').on('keyup', function(e) {
    if(e.keyCode == 8) {  //check if backspace is pressed
      $(this).prev('input').focus(); 
      return;
    }
    if($(this).val().length >= 1) { //for e.g. you are entering pin
      if ($(this).hasClass("last")) {
        alert("done");
        return;
      }
      $(this).next('input').focus(); 
    }
  });

  $('input').on('focus', function() {
    if(!$(this).prev('input').val()){
      $(this).prev('input').focus();
    }
  });
});

vérifier le code ici-

https://jsbin.com/soqubal/3/edit?html,output

0
Kapilrc

UIWebview a la propriété keyboardDisplayRequiresUserAction

Lorsque cette propriété est définie sur true, l'utilisateur doit appuyer explicitement sur les éléments dans la vue Web pour afficher le clavier (ou toute autre vue d'entrée pertinente) pour cet élément. Lorsqu'il est défini sur false, un événement de focus sur un élément entraîne l'affichage et l'association automatique de la vue d'entrée à cet élément.

https://developer.Apple.com/documentation/uikit/uiwebview/1617967-keyboarddisplayrequiresuseractio

0
pkamb