如何在表單字段上設置tabindex？

Question

如何在表單字段上設置html屬性「tabindex」？

我的範本目前看起來像..

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

Answer 1

您可以在此改變小部件，提供的選項卡索引集的ATTRS詞典：

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

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

所有功勞歸於約翰，但{{form.email.data|default:''}}似乎忽略了表格中提供的任何初始數據。最後我用一些jQuery來解決這個痛苦的Django的缺點：

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

與{{ form.email }}將輸出輸入字段合併和附加的tabindex沒有所有的部件/ ATTR天書是特別不愉快的使用的ModelForm時。

Answer 4

的Tab鍵索引是佈局的一個特徵，所以感覺就像它真正屬於在模板，而不是在視圖。下面是實現這個簡單的方法：

首先，定義一個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 5

您還可以使用django-widget-tweaks這一點。

使用render_field（我喜歡這個方法）：

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

或者，使用ATTR濾波器：

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