Question

在以下模板中，如何在浏览器加载时强制光标自动聚焦到form.username字段？

{% block content %}

    <form method="post" action="">
    {% csrf_token %}
    <table>
    <tr>
        <td>{{ form.username.label_tag }}</td>
        <td>{{ form.username }}</td>
    </tr>
    <tr>
        <td>{{ form.password.label_tag }}</td>
        <td>{{ form.password }}</td>
    </tr>
    </table>

    <input type="submit" value="login" style="position: relative; left: 5em;" />
    <input type="hidden" name="next" value="{{ next }}" />
    </form>

    <p><a href="/register/" class="textf" style="position: relative; left: 8em;">Register</a></p>
{% endblock %}

Answer 1

您可以使用django-widget-tweaks

<td>{{ form.username|attr:"autofocus" }}</td>

它还可以添加属性和类，使用自定义模板渲染字段等等

Answer 2

在您的forms.py中，使用autofocus属性定义字段：

username = forms.CharField(
    label=_('Username'),
    strip=True,
    widget=forms.TextInput(attrs={'placeholder': _('Username'), 'class': 'form-control', 'autofocus': True})
)

https://docs.djangoproject.com/en/2.1/ref/forms/widgets/#django.forms.Widget.attrs

Answer 3

你可以用javascript（在这个例子中，Jquery）来做。确保base.html中有一个名为extra_scripts的块（位于结束</body>标记的上方），然后按如下方式添加javascript：

{% block content %}

    <form method="post" action="">
    {% csrf_token %}
    <table>
        <tr>
            <td>{{ form.username.label_tag }}</td>
            <td>{{ form.username }}</td>
       </tr>
    ...
{% endblock %}

{% block extra_scripts %}
    <script type="text/javascript">
        $(function () {
            // When the page has finished loading,
            // autofocus on the username field
            $('input#id_username').focus();
        });
    </script>
{% endblock %}

如果您还没有使用Jquery，则还需要在页面中包含指向它的链接（类似<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>）。

如何在此django表单中自动聚焦光标？

3 个答案: