<select> z atrybutem rozmiaru: iPhone renderuje pusty

Question

Podczas renderowania listy rozwijanej select jak poniżej, iPhone renderuje ją pustą. Jak mogę to naprawić?

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

Powyższy przykład z http://www.w3schools.com/tags/att_select_size.asp. Ich próbka jest http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_size

W Firefoksie (i wszystkich innych przeglądarek), to świadczy jak:

Jednak na iPhone, to wygenerowana puste. Jest to bardzo niekorzystne z punktu widzenia użyteczności, ponieważ odwiedzający nie wie, co znajduje się w pudełku (w naszej aplikacji jest to wybór adresu z kilku możliwości).

Utworzyłem JSFiddle: http://jsfiddle.net/bqMEv/3/ Renderowanie iPhone jest w następujący sposób; pamiętać, że nic nie pojawia się, gdy obie:

• rozmiar jest większy niż 1
• i wysokość jest określona w CSS
• i nie jest zaznaczona opcja

Zdejmowanie CSS height pokazuje, że iPhone ignoruje atrybut size.

Answer 1

Wygląda na to, nie ma standardowy sposób to zrobić, na podstawie zawartości innych tematów na przepełnienie stosu:

• Safari Mobile Multi-Line <Select> aka GWT Multi-Line ListBox
• jquery plugin to convert a <select size="10"> to a usable list on Safari mobile (iOS)

Ale autor drugim temacie napisał wtyczka emulująca to zachowanie: https://github.com/redhotsly/safarimobile-multiline-select

Answer 2

Jeśli potrzebujesz, aby wyświetlić jedną z opcji, należy użyć następujących: HTML selected Attribute

---

---

swojej strony internetowej w Firefox:

Answer 3

Wygląda na to, że ludzie tutaj mogą nie rozumieć w pełni wydaje. Problem polega na tym, że przeglądarka iOS nie wyrenderuje etykiety dla niewybranego pierwszego pola, które zazwyczaj jest wskaźnikiem typu "Proszę wybrać ...". Jeśli nie jest zaznaczone, system iOS renderuje go jako pusty. Nie jest to pożądane, ponieważ użytkownik może dokonać wyboru, ale pole jest puste.

Nie można również ustawić go programowo, aby uzyskać "Proszę wybrać" do wyświetlenia, ponieważ jeśli pole jest wymagane, sprawdzanie poprawności formularza już nie działa, ponieważ przeglądarka uznaje pierwsze pole za wybrane, nawet jeśli jest zaznaczone jako niewybieralny.

"Błąd" polega na tym, że przeglądarka iOS nie wyświetli etykiety dla pierwszego pola, gdy zostanie ustawione jako nieaktywne.

Answer 4

mój prosty fix do tego, przy użyciu 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>'); 
} 
}); 

działa tak:

1. Poczekaj na dokument, aby załadować

2. Jeśli użytkownik odwiedza witrynę za pomocą iPhone, Wykonaj skrypt iPoda lub iPada:

3. Dodaj wybrane i disa bled opcja u góry listy wyboru, z tekstem ".. Proszę wybrać coś".

Czy nic we wszystkich pozostałych przeglądarek, działa świetnie: D