¿Cómo configurar tabindex en los campos de formularios?

Question

¿Cómo configuro el atributo html "tabindex" en los campos de formulario?

Mi plantilla se ve actualmente como ..

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

Answer 1

Puede overide el widget y proporcionar un diccionario attrs con el conjunto de índice de tabulación:

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

Answer 2

Todo el crédito a Alex, pero sólo para completar la solución:

Al usar la generación de campo de formulario automático django (widgets), olvídese de las plantillas que tiene que hacerlo en la definición del formulario así:

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

se convierte en:

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

Pero si usted está dispuesto a abandonar los widgets y mantener la presentación en la plantilla también puede hacerlo de esta manera:

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

Me inclino por este último.

Answer 3

Todo el crédito para John, pero {{form.email.data|default:''}} parece ignorar los datos iniciales proporcionados en el formulario. Terminé usando un poco de jQuery para evitar este doloroso deficiencia Django:

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

combinado con {{ form.email }} es la salida del campo de entrada y adjuntar un índice de tabulación sin todo el widget/attr galimatías que es particularmente desagradable cuando se utiliza un ModelForm .

Answer 4

El índice de tabulación es una característica de la disposición, y por lo que parece que realmente pertenece a la plantilla de, no en la vista . Aquí hay un enfoque sencillo que logra esto:

En primer lugar, definir un custom template filter que añade un atributo tabindex al widget de un campo enlazado:

@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 

A continuación, añadir |tabindex:n a los campos de la plantilla. Por ejemplo:

<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

También se puede utilizar para este django-widget-tweaks.

Usando render_field (prefiero este método):

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

Alternativamente, usando el filtro attr:

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