Javascript Girl
  1. Javascript Girl
  3. Sélection HTML et entrée de texte
Intereting Posts
Les rappels dans node.js sont-ils toujours asynchrones ou toujours synchrones? Ou peuvent-ils être "parfois un, parfois l'autre"? L'importation et l'exportation ES6 ne sont pas prises en charge dans Node.js Obtenir Base64 coder les données de fichier à partir du formulaire d'entrée Forcer un div pour apparaître et superposer tout ce qui est en plein écran Où enregistrez-vous les règles de validation des données du formulaire dans une application Web? Rails link_to: Faites quelque chose après la confirmation Empêcher le texte prédictif de Samsung en HTML Changer l'option et réinitialiser Comment changer le contenu d'un div avec un clic de lien? Comment puis-je utiliser colorbox pour afficher des divs cachés sur ma page sans codage dur? Alerte de notification similaire à la façon dont les fonctions de stackoverflow Différence entre jQuery .hide () et .css ("affichage", "aucun") Obtenir une série de promesses en suspens Comment puis-je répondre à la largeur d'un élément DOM taille auto dans React? Redémarrez une animation gif sans recharger le fichier

Sélection HTML et entrée de texte

Nous avons tous vu d'innombrables exemples de formulaires avec un menu déroulant sélectionné ayant l'une de ses options comme «Autre» et en choisissant cette option, nous voyons une zone de texte d'entrée (qui a été cachée tout au long) nous demandant de saisir notre entrée .

Existe-t-il une meilleure façon de mettre en œuvre cela? Y-a-t-il des plugins qui me permettront de faire mieux? Ou bien, les éléments HTML standard sont-ils suffisants (certains réglages sur une étiquette de sélection, peut-être)?

Une combobox modifiable pourrait être une bonne alternative. Le défi est de le façonner de telle sorte qu'il soit clair pour l'utilisateur qu'il puisse effectivement modifier le contenu du contrôle, plutôt que de ne sélectionner que le contenu par défaut fourni.

Vous pouvez utiliser datalist . Exemple: 

<input list="cookies" placeholder="Type of Cookie"/> <datalist id="cookies"> <option value="Chocolate Chip"/> <option value="Peanut Butter"/> <option value="Raisin Oatmeal"/> </datalist>

Fiddle: http://jsfiddle.net/joshpauljohnson/Uv5Wk/

Cela donne à l'utilisateur la possibilité de sélectionner parmi une liste de cookies et, si le type de cookie qu'ils cherchent n'est pas trouvé dans la liste, entrez le leur.

Mon seul boeuf avec cela dans votre situation est qu'il peut ne pas être immédiatement évident pour l'utilisateur qu'ils peuvent l'utiliser comme un menu déroulant. Mais cela pourrait être facilement corrigé avec un peu de css.

C'est une façon assez courante de concevoir un formulaire à la fois sur papier et sur le Web. Je ne sais pas trop exactement ce que vous voulez dire avec une meilleure façon de le faire …

Si vous craignez que le champ caché n'apparaisse pas si l'utilisateur a un javascript désactivé, je vous suggère de cacher le champ à l'aide de javascript ou d'avoir une zone de texte "Si autre, s'il vous plaît spécifier" dans un bloc noscript : 

 <select><!-- implemented something like rahul showed --> <noscript> <label for="ifOtherInput">If other please specify</label> <input type="text" name="ifOtherInput" id="ifOtherInput"> </noscript> <!-- This is initially hidden and shown by when the user selects the other option --> <div id="divOther" class="dispnone"> <!-- Here we know the user selected other so we can just have this label: --> <label for="ifOtherInputJs">Please specify</label> <input type="text" name="ifOtherInputJs" id="ifOtherInputJs"> </div>

Le backend doit gérer que l'entrée dans le bloc noscript est absente. Ou vous pouvez ajouter la version javascript de l'entrée à la page de l'entrée en utilisant javascript (donc les deux ne peuvent pas apparaître simultanément pour qu'ils puissent avoir le même nom.