Onglet Auto dans JQuery

Question

J'ai téléchargé le fichier autotab.js dans mon application. Et j'essaie de l'utiliser dans mon application.

J'ai un formulaire, et je veux passer automatiquement à l'élément DOM suivant après avoir rempli un champ de saisie.Aussi que le formulaire est généré uniquement dans la page, je ne peux pas utiliser l'autotab avec l'ID de champ comme un connu facteur.Comment faire en utilisant JQuery.

Answer 1

Si vous ne pouvez pas ajouter d'identifiants à vos entrées, vous devez trouver différents sélecteurs pour ces attributs.

Vous avez probablement un nom pour ces étiquettes si vous prévoyez d'envoyer ces données. Ensuite, vous pouvez correspondre à l'entrée suivante par nom à l'aide sélecteur suivant:

$('input[name=nextInputName]') 

Sinon, vous pouvez toujours trouver l'élément suivant en utilisant une combinaison d'appels de méthode children() et parent(), afin de traverser de l'entrée en cours à l'autre .

Personnellement, je pense que la solution la plus simple serait d'attribuer des identifiants, même dans jQuery si vous ne pouvez pas le faire en HTML: cela facilitera la mise au point automatique.

var counter = 0; 
$('input').each(function() { 
    if (!$(this).attr('id')) { 
     $(this).attr('id', 'autofocus' + counter); 
     counter += 1; 
    } 
}); 

Vous pouvez changer le sélecteur de sauter quelques-uns des éléments que vous ne voulez pas avoir la fonction de mise au point automatique.

Vous pouvez même écrire vous-même mise au point automatique en quelques lignes:

$('input[id^=autofocus]').keyup(function() { 
    if ($(this).val().length === $(this).attr('maxlength')) { 
     var id = $(this).attr('id').match(/^autofocus(\d+)$/[1]); 
     var nextId = Number(id) + 1; 
     $('#autofocus' + nextId).focus() 
    } 
}); 

Answer 2

Cette fonction de lecture de la longueur maximale définie sur une entrée. Vous pouvez l'appeler en utilisant $ ('input.autotab'). Autotab();

La fonction jquery est la suivante:

$.fn.autotab = function(){ 
$(this).keyup(function(e){ 
     switch(e.keyCode){ 
       // ignore the following keys 
       case 9: // tab 
         return false; 
       case 16: // shift 
         return false; 
       case 20: // capslock 
         return false; 
       default: // any other keyup actions will trigger 
         var maxlength = $(this).attr('maxlength'); // get maxlength value 
         var inputlength = $(this).val().length; // get the length of the text 
         if (inputlength >= maxlength){ // if the text is equal of more than the max length 
           $(this).next('input[type="text"]').focus(); // set focus to the next text field 
         } 
     } 
}); 

};

Answer 3

Voici comment j'ai réussi à faire fonctionner la fonctionnalité de l'onglet automatique. J'espère que ça aide les autres.

<input type="tel" id="areaPhone" name="areaPhone" data-next-field="prefixPhone" maxlength="3"> 
<input type="tel" id="prefixPhone" name="prefixPhone" data-next-field="suffixPhone" maxlength="3"> 
<input type="tel" id="suffixPhone" name="suffixPhone" maxlength="4"> 

/* jQuery Prêt */

$('input[type=tel]').keyup(function() { 

/* Steps: 
    1. Get length values from field 
    2. Get maxlength value of field and convert to integer 
    3. Get data-next-field value of next field to focus on 
    4. Concat a hashtag and data value of field to jump to 
*/ 

var fieldVal = $(this).val(), 
    fieldLen = fieldVal.length, 
    fieldMaxLen = parseInt($(this).attr('maxlength')), 
    jumpToField = $(this).data('next-field'), 
    nextFieldID = '#' + jumpToField; 

// Check if field length and maxlength are equal 
if (fieldMaxLen === fieldLen) { 

    // Check if data-next-field attribute is undefined or null 
    if (jumpToField === undefined || jumpToField === null) { 

    } else { 
     $(nextFieldID).focus(); 
    } 
} 

});