如何在表单字段中设置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

所有归功于Alex,但只是为了填写解决方案:

使用django auto formfield生成(小部件)时,忘记在表单定义中必须执行的模板,如下所示:

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