Indice scheda non funziona in forma

Ho usato questo plugin: http://codepen.io/wallaceerick/pen/ctsCz

per personalizzare tutti i tag select nel mio sito web, come si può vedere in questo modo il select tag non sono visibili e non il display, vengono sostituite da un div <div class="select-styled"></div> dove ogni valore è stato selezionato l’opzione è inserito. Mi piace la semplicità di questo codice, ma vorrei dare la possibilità all’utente di utilizzare la scheda quando egli compila il modulo.
Ovviamente in questo caso non è possibile perché il select tag sono nascosti in modo che sono saltato dalla scheda pulsante.

Ho riprodotto il caso qui http://codepen.io/Mannaio/pen/ciFtv dove ho inserito un input prima e dopo il select tag e come si può vedere la scheda pulsante funziona solo tra il inputs . Quindi la mia domanda è , come posso risolvere questo problema? come posso aggiungere il tabindex che mi lasci anche utilizzando il select in forma?

InformationsquelleAutor Koala7 | 2014-05-08

 

2 Replies
  1. 1

    Mettere esplicito tabindex attributi di selezionare gli elementi del modulo, ad esempio:

    <select id="mounth" tabindex="2">

    Nel tuo script, in $(‘select’).each(function(){…

    Aggiungere questo:

    tabIndex = $this.attr('tabindex');

    E modificare la riga in cui si inserisce l’elegante div versione per includere l’attributo tabindex con l’originale tabindex numero che hai catturato con il tabIndex:

    $this.after('<div class="select-styled" tabindex='+ tabIndex +'></div>');

    Che dovrebbe dare ciò che vuoi.

    (Ecco un pagina del codepen pagina con in azione: http://codepen.io/anon/pen/rIeHd )

  2. 1

    Dare il primo elemento di un indice di 1, così:

    <input class="string required" tabindex='1' id="account_last_name" name="account[last_name]" required="required" size="50" type="text" />

    Aggiungere un contatore per ogni tuo statment in questo modo:

    $('select').each(function(i){/*code*/}

    Aggiungere il contatore+1 per l’indice della dinamica div in questo modo:

    $this.after('<div tabindex='+(i+1)+' class="select-styled"></div>');

    DEMO

Lascia un commento