Question

如何在表单字段中设置html属性“tabindex”？

我的模板目前看起来像..

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

Answer 1

选项卡索引是布局的一项功能，因此感觉它确实属于模板，而不是视图。这是一种直截了当的方法：

首先，定义一个custom template filter，将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

Answer 4

所有归功于John，但{{form.email.data|default:''}}似乎忽略了表单中提供的任何初始数据。我最终使用了一些jQuery来解决这个痛苦的Django缺点：

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

与{{ form.email }}结合将输出输入字段并附加tabindex，而不使用模型框架时特别不愉快的所有widget / attr mumbo-jumbo。

Answer 5

您也可以使用django-widget-tweaks。

使用render_field（我更喜欢这种方法）：

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

或者，使用attr过滤器：

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

如何在表单字段中设置tabindex？

5 个答案: