<select> avec la taille de l'attribut: iPhone rend vide

Lors du rendu d'un sélectionnez le menu déroulant ci-dessous, l'iPhone rend il vide. Comment puis-je résoudre ce problème?

<select size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

L'exemple ci-dessus de http://www.w3schools.com/tags/att_select_size.asp. Leur échantillon est http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_size

Dans Firefox (et tous les autres navigateurs), il les rend comme:

Cependant, sur un iPhone, il est rendu vide. C'est très mauvais pour la convivialité que le visiteur ne sait pas ce qui est dans la boîte (dans notre application, c'est pour la sélection de l'adresse de plusieurs possibilités).

<select> avec la taille de l'attribut: iPhone rend vide

J'ai créé un JSFiddle: http://jsfiddle.net/bqMEv/3/ L'iPhone, le rendu est comme suit; à noter qu'il n'y a rien montré lors de deux:

la taille est supérieure à 1
et la hauteur est spécifiée dans le CSS
et aucune option n'est sélectionnée

<select> avec la taille de l'attribut: iPhone rend vide

Retrait de la CSS hauteur indique que l'iPhone ignore l'attribut de taille.

<select> avec la taille de l'attribut: iPhone rend vide

Au lieu d'utiliser size="3", essayez d'utiliser une règle CSS select { width: 10px; }
Vous n'avez pas une option comme "<option selected="selected">", c'est fait pour le but ?
À l'aide de l'exemple de code ci-dessus, il n'y a pas de PRÉ-sélectionné le type de voiture. Pour ce faire, il faut ajouter " - Sélectionnez le type de véhicule --" ou similaire au HTML. Dans mon application, vous êtes en sélectionnant l'adresse de votre domicile à partir d'une liste d'adresses; je ne sais pas lequel choisir.
Le cas d'utilisation est, vous êtes présenté avec une liste d'adresses correspondant à votre code postal. Si c'est un select size=1, vous devez cliquer dessus pour afficher toutes les données. Si c'est un select size=10, alors vous pouvez voir les 10 premières adresses. C'est beaucoup moins de travail de la part du visiteur ET s'adapte avec le "bureau" de conception. La raison que c'est un problème, c'est que cela fonctionne parfaitement bien avec tous les autres navigateurs à l'EXCEPTION de l'iPhone/iPad, ce qui représente 20% des visiteurs.
Ne pas utiliser de w3schools pour quoi que ce soit. Elle est mauvaise. Très mauvaise.

OriginalL'auteur GlennG | 2013-02-18

6

Regarde comme il n'y a pas moyen de le faire, sur la base du contenu d'autres sujets sur stack overflow:
- Safari Mobile Multi-Ligne <Select> aka GWT Multi-Ligne ListBox
- plugin jquery pour convertir un <select size="10"> pour une liste utilisable sur Safari mobile (iOS)
Mais l'auteur de la deuxième thème a écrit un plugin qui émule le comportement: https://github.com/redhotsly/safarimobile-multiline-select

forums.macrumors.com/showthread.php?t=324849
Semble que iOS ne prend pas en charge normale HTML <select> attributs de la taille > 1 ou plusieurs sélections. On a recours à JavaScript comme une solution de contournement si la conception en appelle à un " sélecteur de style des widgets.

OriginalL'auteur Alexey Ivanov
3

Mon simple pour résoudre ce problème, à l'aide de Jquery:
```
$(document).ready(function(){
if(navigator.userAgent.match(/(iPhone|iPod|iPad)/i)) {
$('#my_select_box').prepend('<option value="" selected="selected" disabled="disabled">..Please select something</option>');
}
});
```
Fonctionne comme ceci:
1. Attendre document à charge
2. Si l'utilisateur visite le site à l'aide d'un iPhone, iPod ou iPad exécuter le script
3. Ajouter une sélection de désactivé l'option en haut de votre liste de sélection, avec le texte
  "..S'il vous plaît sélectionner quelque chose".
Ne fait rien dans tous les autres navigateurs, fonctionne très bien 😀

OriginalL'auteur Malasorte
2

Si vous avez besoin d'afficher l'une des options, utilisez la commande suivante: HTML Attribut sélectionné

Votre page web dans firefox:

Le problème est que rien n'est sélectionné jusqu'à ce que l'utilisateur a sélectionné quelque chose. Le cas d'utilisation est que vous avez entré votre code postal sur la page précédente, nous sommes la recherche pour les adresses, puis de les afficher dans un multi-ligne liste de sélection pour vous de choisir votre adresse. L'iPhone rend cela comme un grand vide widget; tout le reste il montre avec beaucoup de lignes d'adresses.
Mettre selected attribut de faire de la valeur pré-sélectionnée, il est fait référence à la réponse et ce que vous voyez sur la capture d'écran est la première fois que j'ai ouvert déroulante ne pas choisir quelque chose de moi-même (notez la de cocher l'option avec selected attribut)
À l'aide de l'exemple de code, qui est PRÉ-SÉLECTIONNÉ voiture? La seule façon dont cela fonctionne est d'ajouter une nouvelle option "-- choisir un véhicule --", mais cela modifie le HTML.
En utilisant ce code, présélectionnés est le Saab option, vous avez essayé ? Juste ajouter selected attribuer à une option. N'oubliez pas d'actualiser le contrôle à Soumettre bouton de Code.
Oui; l'ajout de l'attribut sélectionner fonctionne. Mais... à moins que j'ai ajouter un null option "-- choisir un véhicule", je ne sais pas quel élément est pré-sélectionné. Ce que je veux vraiment, c'est un correctif à faire Safari/pour iPhone de travail comme les autres navigateurs.

OriginalL'auteur A-Live
0

Il semble que les gens d'ici peuvent ne pas être pleinement comprendre le problème. Le problème est que l'iOS navigateur ne rendra pas l'étiquette de la unselectable premier champ, qui serait habituellement un "s'il vous Plaît sélectionner ..." indicateur de type de. Si elle n'est pas sélectionnée, iOS rend comme vide. Ce n'est pas souhaitable, car il y a des choix pour l'utilisateur de faire, mais le champ reste vide.

Vous ne peut aussi la définir par programmation sélectionnés pour obtenir le "s'il vous Plaît sélectionnez" affichage, parce que si le champ est obligatoire, la validation du formulaire ne fonctionne plus, comme le navigateur considère le premier champ sélectionné, même s'il est marqué comme ne peut pas être sélectionnée.

Le "Bug", c'est que iOS navigateur n'affiche pas l'étiquette pour le premier champ, lorsqu'il est défini comme ne peut pas être sélectionnée.

OriginalL'auteur 80sTron

Vous devez vous connecter pour publier un commentaire.