Как установить tabindex на полях форм?

Question

Как установить атрибут html "tabindex" в полях формы?

Мой шаблон в настоящее время выглядит как ...

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

Answer 1

Индекс табуляции - это особенность макета, и кажется, что он действительно принадлежит шаблону , а не представлению . Вот простой подход, который достигает этого:

Сначала определите пользовательский шаблонный фильтр , который добавляет атрибут tabindex к виджету связанного поля:

@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

Затем добавьте |tabindex:n к полям в шаблоне. Например:

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

Весь кредит Алексу, но только для того, чтобы заполнить решение:

При использовании автоматической генерации поля формы django (виджеты) забудьте о шаблонах, которые вы должны сделать, в определении формы, например так:

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

становится:

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

Но если вы хотите отказаться от виджетов и сохранить презентацию в шаблоне, вы также можете сделать это следующим образом:

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

Я склоняюсь к последнему.

Answer 3

Вы можете переопределить виджет и предоставить словарь attrs с установленным индексом вкладки:

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

Answer 4

Для этого также можно использовать django-widget-tweaks .

Использование render_field (я предпочитаю этот метод):

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

В качестве альтернативы, используя фильтр attr:

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

Answer 5

Вся благодарность Джону, но {{form.email.data|default:''}}, похоже, игнорирует любые начальные данные, предоставленные в форме. В итоге я использовал jQuery, чтобы обойти этот болезненный недостаток Django:

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

в сочетании с {{ form.email }} выведет поле ввода и присоединит tabindex без всего виджета / атрибута mumbo-jumbo, что особенно неприятно при использовании ModelForm.