web-dev-qa-db-fra.com

Comment déplacer le focus vers la prochaine entrée avec jQuery?

J'utilise le plugin de saisie semi-automatique avec jQuery et cela fonctionne bien. Toutefois, dans IE, lorsque l'utilisateur sélectionne un élément dans la saisie semi-automatique, le focus ne passe pas ensuite au champ de saisie suivant. Naturellement, cela fonctionne dans Firefox. Le plugin n'a pas de solution intégrée mais prévoit des "options". Existe-t-il un moyen de le forcer à passer au champ de saisie suivant?

jqueryautocomplete
48
Matt

Vous pouvez faire quelque chose comme ça:

$("input").change(function() {
  var inputs = $(this).closest('form').find(':input');
  inputs.eq( inputs.index(this)+ 1 ).focus();
});

Les autres réponses publiées ici peuvent ne pas fonctionner pour vous car elles dépendent de la prochaine entrée étant l'élément très proche, ce qui n'est souvent pas le cas. Cette approche remonte au formulaire et recherche l'élément de type d'entrée suivant.

91
Nick Craver

JQuery UI a déjà cela, dans mon exemple ci-dessous, j'ai inclus un attribut maxchar pour se concentrer sur le prochain élément capable de se concentrer (entrée, sélection, zone de texte, bouton et objet) si j'ai tapé le nombre maximum de caractères

HTML:

text 1 <input type="text" value="" id="txt1" maxchar="5" /><br />
text 2 <input type="text" value="" id="txt2" maxchar="5" /><br />
checkbox 1 <input type="checkbox" value="" id="chk1" /><br />
checkbox 2 <input type="checkbox" value="" id="chk2" /><br />
dropdown 1 <select id="dd1" >
    <option value="1">1</option>
    <option value="1">2</option>
</select><br />
dropdown 2 <select id="dd2">
    <option value="1">1</option>
    <option value="1">2</option>
</select>

Javascript:

$(function() {
    var focusables = $(":focusable");   
    focusables.keyup(function(e) {
        var maxchar = false;
        if ($(this).attr("maxchar")) {
            if ($(this).val().length >= $(this).attr("maxchar"))
                maxchar = true;
            }
        if (e.keyCode == 13 || maxchar) {
            var current = focusables.index(this),
                next = focusables.eq(current+1).length ? focusables.eq(current+1) : focusables.eq(0);
            next.focus();
        }
    });
});
27
Lambert Antonio

Ce que voulait dire Sam était:

$('#myInput').focus(function(){
    $(this).next('input').focus();
})
11
ant

Essayez d'utiliser quelque chose comme:

            var inputs = $(this).closest('form').find(':focusable');
            inputs.eq(inputs.index(this) + 1).focus();
7
bussa

pourquoi ne pas simplement donner le champ de saisie où vous voulez passer à un identifiant et faire un focus simple

$("#newListField").focus();
5
mindmyweb

Je viens d'écrire un plugin jQuery qui fait ce que vous cherchez (ennuyé de ne pas avoir pu trouver de solution andy moi-même (tabStop -> http://plugins.jquery.com/tabstop/ )

1
Hoffmann

Pourriez-vous publier une partie de votre code HTML à titre d'exemple?

En attendant, essayez ceci:

$('#myInput').result(function(){
    $(this).next('input').focus();
})

Ce n'est pas testé, il faudra donc probablement quelques ajustements.

1
Sam

Utilisez eq pour accéder à un élément spécifique.

Documentation sur index

$("input").keyup(function () {
   var index = $(this).index("input");                  
   $("input:eq(" + (index +1) + ")").focus(); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="text" maxlength="1"  />
<input type="text" maxlength="1"  />

<input type="text" maxlength="1"  />

<input type="text" maxlength="1"  />
<input type="text" maxlength="1"  />
<input type="text" maxlength="1"  />
1
temo
  function nextFormInput() {
      var focused = $(':focus');
      var inputs = $(focused).closest('form').find(':input');
      inputs.eq(inputs.index(focused) + 1).focus();
  }
1
Aditya Mittal

Voici ce qui a fonctionné dans mon cas. Peut être moins gourmand en performances.

$('#myelement').siblings('input').first().focus();
0
rncrtr

Le moyen le plus simple consiste à le supprimer de l'index des onglets tous ensemble:

$('#control').find('input[readonly]').each(function () {
    $(this).attr('tabindex', '-1');
});

J'utilise déjà cela sur quelques formulaires.

0
jfreak53

votre chat l'utilise

$(document).on("keypress","input,select",function (e) {
    e.preventDefault();
    if (e.keyCode==13) {
        $(':input:eq(' + ($(':input').index(this) + 1) +')').focus();
    }
});
0
NASSER KHANZADI

si vous utilisez event.preventDefault () dans votre script, mettez-le en commentaire car IE ne l'aime pas.

0
anuj pradhan
var inputs = $('input, select, textarea').keypress(function (e) {
  if (e.which == 13) {
    e.preventDefault();
    var nextInput = inputs.get(inputs.index(this) + 1);
    if (nextInput) {
      nextInput.focus();
    }
  }
});
0
jopla