Come impostare tabindex nei campi modulo?

Question

Come si imposta l'attributo html "tabindex" nei campi modulo?

mio modello attualmente sembra ..

<div class="field text username"> 
    <label>Email Address</label> 
    {{ form.email }} 
</div> 

Answer 1

È possibile overide il widget e fornire un dizionario attrs con il set indice di tabulazione:

http://docs.djangoproject.com/en/dev/ref/forms/widgets/#django.forms.Widget.attrs

Answer 2

Tutto il merito di Alex, ma solo per compilare la soluzione:

Quando si utilizza la generazione del campo di form django auto (widget), dimenticare i modelli che è necessario farlo nella definizione del modulo come questo:

class AuthenticationForm(forms.Form): 
    email = forms.CharField(label=_("Email Address"), max_length=75) 

diventa:

class AuthenticationForm(forms.Form): 
    email = forms.CharField(
        label=_("Email Address"), max_length=75, 
        widget=forms.TextInput(attrs={'tabindex':'1'}) 
       ) 

Ma se siete disposti ad abbandonare i widget e mantenere la presentazione nel modello si può anche fare in questo modo:

<div class="field text username"> 
    <label>Email Address</label> 
    <input id="id_email" type="text" name="email" 
     tabindex="1" maxlength="75" 
     value="{{form.email.data|default:''}}"/> 
</div> 

Sono propenso a quest'ultimo.

Answer 3

Tutto il credito a John, ma {{form.email.data|default:''}} sembra ignorare qualsiasi dato iniziale fornito nel modulo. Ho finito per usare un po 'di jQuery per aggirare questo doloroso lacuna Django:

$.each({ 
    'email': 1 
    // add other fields here 
}, function (key, value) { 
    $('#id_' + key).attr('tabindex', value); 
}); 

combinato con {{ form.email }} uscita volontà del campo di input e allegare un tabindex senza tutto il widget/attr Mumbo-Jumbo che è particolarmente sgradevole quando si utilizza un ModelForm .

Answer 4

L'indice scheda è una caratteristica del tracciato, e così ci si sente come in realtà, appartiene alla modello, non nel vista. Ecco un approccio diretto che raggiunge questo:

In primo luogo, definire un custom template filter che aggiunge un attributo tabindex al widget di un campo associato:

@register.filter 
def tabindex(value, index): 
    """ 
    Add a tabindex attribute to the widget for a bound field. 
    """ 
    value.field.widget.attrs['tabindex'] = index 
    return value 

Poi, aggiungere |tabindex:n ai campi nel modello. Per esempio:

<tr> 
<th>{{ form.first_name.label_tag }}<td>{{ form.first_name|tabindex:1 }} 
<th>{{ form.email.label_tag }}<td>{{ form.email|tabindex:3 }} 
<tr> 
<th>{{ form.last_name.label_tag }}<td>{{ form.last_name|tabindex:2 }} 
<th>{{ form.active.label_tag }}<td>{{ form.active|tabindex:4 }} 

Answer 5

È inoltre possibile utilizzare django-widget-tweaks per questo.

Utilizzando render_field (preferisco questo metodo):

{% render_field form.email tabindex="4" %} 

In alternativa, utilizzando il filtro attr:

{{ form.email|attr:"tabindex:4" }}