<select> con attributo size: iPhone restituisce vuoto

Question

Quando si esegue il rendering di un menu a discesa di selezione come di seguito, iPhone lo rende vuoto. Come posso risolvere questo?

<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'esempio precedente da http://www.w3schools.com/tags/att_select_size.asp. Il loro campione è http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_size

In Firefox (e tutti gli altri browser), rende come:

Tuttavia, su un iPhone, è reso vuota. Questo è molto brutto per l'usabilità in quanto il visitatore non sa cosa c'è nella scatola (nella nostra applicazione, è per selezionare il loro indirizzo da diverse possibilità).

Ho creato un JSFiddle: http://jsfiddle.net/bqMEv/3/ La resa iPhone è il seguente; notare che non c'è niente mostrato quando entrambi:

• dimensione è maggiore di 1
• e l'altezza è specificato nel CSS
• e nessuna opzione è selezionata

Rimozione del CSS height mostra che l'iPhone ignora l'attributo size.

Answer 1

Sembra che non esiste un modo standard per farlo, in base al contenuto di altri argomenti su stack overflow:

• 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)

Ma autore del secondo argomento ha scritto un plug-in che emula tale comportamento: https://github.com/redhotsly/safarimobile-multiline-select

Answer 2

Se avete bisogno di visualizzare una delle opzioni, utilizzare il seguente: HTML selected Attribute

---

---

Sito personale in firefox:

Answer 3

Sembra che le persone qui potrebbero non comprendere pienamente lui emette. Il problema è che il browser iOS non renderà l'etichetta per il primo campo non selezionabile, che in genere sarà un indicatore di tipo "Seleziona ...". Se non è selezionato, iOS lo rende vuoto. Questo non è desiderabile, perché ci sono delle scelte da fare per l'utente, ma il campo appare vuoto.

Non è possibile impostarlo anche programmato per visualizzare "Seleziona", perché se il campo è richiesto, la convalida del modulo non funziona più, poiché il browser considera il primo campo come selezionato, anche se è contrassegnato come non selezionabile.

Il "Bug" è che il browser iOS non visualizza l'etichetta per il primo campo, quando è impostato come non selezionabile.

Answer 4

mio semplice correzione di questo, utilizzando 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>'); 
} 
}); 

funziona così:

1. Attendere che il documento per caricare

2. Se l'utente visita il sito utilizzando un iPhone, iPod o iPad esegui lo script

3. Aggiungi un selezionato e disa opzione cancellata nella parte superiore dell'elenco di selezione, con il testo "... selezionare qualcosa".

non fa nulla in tutti gli altri browser, funziona alla grande: D