Wie legt man Tabindex in Formularfeldern fest?

Question

Wie setze ich das HTML-Attribut "tabindex" in Formularfeldern?

Meine Vorlage sieht derzeit wie ..

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

Answer 1

Sie das Widget overide und einen attrs Wörterbuch mit dem aufgegebenen Tabindex bieten:

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

Answer 2

Alle Kredite zu Alex, aber nur Um die Lösung auszufüllen:

Wenn Sie die Django Auto Formfield-Generierung (Widgets) verwenden, vergessen Sie die Vorlagen, die Sie haben müssen tun Sie es in der Formulardefinition wie folgt aus:

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

wird:

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

Aber wenn Sie bereit sind, die Widgets und halten Präsentation in der Vorlage können Sie es auch auf diese Weise tun zu verlassen:

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

Ich bin zu letzterem geneigt.

Answer 3

Alle Kredit an John, aber {{form.email.data|default:''}} scheint alle im Formular angegebenen Anfangsdaten zu ignorieren. Ich landete einige jQuery verwenden, um dieses schmerzliche Django Manko zu erhalten:

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

mit {{ form.email }} ausgeben wird das Eingabefeld kombiniert und ein tabindex ohne all das Widget/attr Hokuspokus anschließen, die besonders unangenehm ist, wenn eine Modelform mit .

Answer 4

Die Registerkarte Index ist ein Merkmal des Layouts, und so fühlt es sich wie es in der Vorlage, nicht in der Ansicht wirklich gehört. Hier ist ein einfacher Ansatz, der dies erreicht:

Zunächst definieren eine custom template filter, die ein tabindex Attribut auf das Widget eines gebundenen Feld fügt hinzu:

@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 

Dann fügen Sie |tabindex:n auf die Felder in der Vorlage. Zum Beispiel:

<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

Sie können auch django-widget-tweaks für diese.

Mit render_field (I bevorzugen diese Methode):

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

Alternativ attr-Filter:

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