Tabindex в шаблоне Django не перемещает курсор в правильное поле

Question

У меня есть форма Django, и я хочу, чтобы пользователь мог вкладывать имя пользователя, пароль и кнопку входа в таком порядке.

tabindex не работает в моем шаблоне. Вместо этого он перемещается к имени пользователя, кнопке входа и паролю в указанном порядке.

<form method="post" action="{% url 'login' %}">
{% csrf_token %}
  <table>
      <tr>
        <td>{{ form.username.label_tag }}</td>
      <td><div tabindex="1">{{ form.username }}</div></td>
        <td rowspan="2"><div tabindex="3"><button type="submit" class="btn btn-success">Login</button></div></td>
    </tr>
    <tr>
      <td>{{ form.password.label_tag }}</td>
      <td><div tabindex="2">{{ form.password }}</div></td>
    </tr>
  </table>
</form>

что я делаю не так?

Answer 1

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

Как добавить фильтр в шаблоны?

Ответ - Вы должны создать один каталог в вашем приложении с именем 'templatetags'. Вы хотите, чтобы этот каталог распознавался как Python package, поэтому убедитесь, что вы создали пустой файл __init__.py. Далее, go вперед и создайте файл Python, в котором будут храниться ваши теги, и назовите его как app_filters.py или похожее имя, которое легко идентифицировать. Это похоже на ...

Django Project
  -> my_app
    ---> models.py
    ---> views.py
    ---> templatetags
      -----> __init__.py
      -----> app_filters.py

Для получения дополнительной информации нажмите здесь

app_filters.py

from django import template

register = template.Library()

@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

ПРИМЕЧАНИЕ. После добавления модуля templatetags потребуется перезапустить сервер, прежде чем использовать теги или фильтры в шаблонах.

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

your_html_file. html

{% load app_filters %}
<form method="post" action="{% url 'login' %}">
{% csrf_token %}
  <table>
      <tr>
        <td>{{ form.username.label_tag }}</td>
      <td><div>{{ form.username|tabindex:1 }}</div></td>
        <td rowspan="2"><div><button tabindex="3" type="submit" class="btn btn-success">Login</button></div></td>
    </tr>
    <tr>
      <td>{{ form.password.label_tag }}</td>
      <td><div>{{ form.password|tabindex:2 }}</div></td>
    </tr>
  </table>
</form>