时间戳

首页 > 解决方案 > Django模板中的Tabindex不会将光标移动到正确的字段

html - Django模板中的Tabindex不会将光标移动到正确的字段

问题描述

我有一个 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>

我究竟做错了什么？

标签： htmldjango

解决方案

我认为您必须定义一个自定义模板过滤器，将 tabindex 属性添加到绑定字段的小部件：

如何在模板中添加过滤器？

Ans - 您必须在您的应用程序中创建一个名为“templatetags”的目录。您希望此目录被识别为Python package，因此请确保创建一个空__init__.py文件。接下来，继续创建 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

注意：添加模板标签模块后，您需要重新启动服务器，然后才能在模板中使用标签或过滤器。

然后，添加|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>

推荐阅读