Développement dynamique d'une série d'entrées de texte (HTML/JavaScript)

Question

Je crée une application de saisie de données pour certains éléments internes.

Mon équipe doit entrer des informations sur les "éléments" qui peuvent avoir plusieurs "catégories" et vice versa.

J'ai besoin d'un moyen rapide de les laisser entrer un nombre arbitraire de catégories.

Voici mon idée:

Sur la page d'entrée de l'article, je l'ai pour que d'abord pour « catégories » il y a une entrée de texte et si elle est tabulé sur alors qu'il est vide, le champ de saisie est supprimé (sauf si c'est le seul) et la mise au point passe au champ suivant. Si c'est pas vide quand il est tabulé sur et s'il s'agit du dernier champ de saisie dans le tableau, alors une entrée de texte "catégorie" supplémentaire sera ajoutée et mise au point.

De cette manière, les utilisateurs peuvent saisir une quantité arbitraire de catégories très rapidement, sans avoir à lâcher le clavier, simplement en tapant et en appuyant sur l'onglet. Ensuite, appuyez deux fois sur l'onglet pour indiquer la fin de la liste.

Tout d'abord, que pensez-vous de cette interface? Y a-t-il une meilleure façon de le faire? Deuxièmement, y a-t-il un plugin jQuery (ou quelque chose) pour cela? J'ai cherché mais je ne peux pas en trouver un. J'ai cherché scriptaculous/prototype et mootools aussi, sans chance.

Je préférerais évidemment utiliser quelque chose qui a déjà fait ses preuves.

Tout et tous les conseils appréciés

Answer 1

il est en fait pas trop difficile à mettre en œuvre que, même avec la vanille JS (ex: pas jQuery, prototype, etc.), mais tout est plus facile avec jQuery, donc je vais avoir un aller à l'aide que:

en supposant une structure comme celle-ci:

<form id="myForm"> 
    <div class="inputRow"> 
     <input type="text" name="myInput[]" /> 
    </div> 
    <div class="inputRow"> 
     <input type="text" name="myInput[]" /> 
    </div> 
    ... 
</form> 

Voici la JS

$('#myForm :text').blur(onBlurHandler); 

function onBlurHandler() { 
    $row = $(this).parent(); 
    if ($row 
     .nextAll(":has(:text)")  // all following divs with a text element 
     .length == 0    // but there aren't any, we're on the last one 
    ) { 
     if ($.trim($row.find(":text").val())) { // the text box isn't empty 
      $copy = $row.clone(true); 
      $copy 
       .find(":text") // get the new text box, 
       .val('')  // remove any text in it 
       .blur(onBlurHandler) // and add the event handler (is this necessary?) 
      ; 
      $copy.insertAfter($row); 
     } else if ($row.prev(':has(:text)').length) { // the text box is empty, and this one isn't the first row 
      $row.remove(); // get rid of the row. 
     } 
    } 
} 

---

Réponse aux commentaires:

merci pour la réponse! J'ai essayé mais ça ne semble pas fonctionner comme prévu. je suis sur mac firefox. Si je tabule le dernier champ, il ajoute le nouveau mais concentre la barre d'adresse. J'ai essayé d'ajouter: $copy.find(":text").focus(); après la ligne insertAfter, mais cela ne change rien. des idées?

aussi si je décale l'onglet blurhandler ne sait pas que je vais dans la direction opposée. Y a-t-il un moyen de contourner cela?

Hmm, je n'avais pas pensé à ça. Ce que vous pourriez faire, c'est de mettre un élément après tous vos champs de texte qui peuvent prendre le focus (comme une zone de texte qui est rendue hors écran, par exemple: margin-left: -10000px). Ajoutez un gestionnaire onfocus sur cela pour voir si la dernière rangée est vide, et si c'est le cas, alors il aurait été ajouté juste alors par la fonction onBlurHandler, alors passez le focus à la dernière rangée.Si la dernière rangée n'est pas vide, passez le focus sur l'élément suivant (votre bouton de soumission, probablement). S'il y a des problèmes avec la dernière ligne qui n'existe pas encore dans le DOM, mettez le ci-dessus dans un délai d'expiration.

(Si cela fonctionne réellement) cela devrait permettre à vos utilisateurs d'effectuer un tabulation en arrière et en avant sans problème.

Answer 2

D'abord je vais essayer d'aborder les problèmes commentés sur la solution nickf.

La mise au point sur l'entrée nouvellement créée $copy.find(":text").focus(); ne fonctionnera pas. La méthode de mise au point jQuery déclenche uniquement l'événement, mais n'appelle pas la méthode de mise en évidence sous-jacente.

Vous pouvez régler la mise au point avec setTimeout(function(){$copy.find(":text").get(0).focus()}, 10); mais:

• setTimeout est nécessaire dans Firefox ou des choses étranges se passera avec le curseur clignotant.

• IE7 a besoin d'une autre entrée pour effectuer la mise au point lors de la tabulation. Je n'ai pas trouvé le moyen de mettre l'accent sur une entrée si le focus va à la barre d'adresse. Je suppose que ce ne sera pas un problème car vous aurez besoin d'au moins un bouton de soumission.

Pour commander onglet de changement que j'ai essayé de suivre l'élément ciblé, afin de sauter le blurHandler lorsque l'élément ciblé est une entrée précédente, mais le code qui en résulte est vraiment moche, donc je vais poster ceci et chercher une meilleure solution.

Enfin, vous vous demandez ce que nous pensons de cette interface, et je pense qu'une liste séparée par des virgules des catégories est plus facile à coder une remplir. :-)