在密码字段之前以Django / Bootstrap crispy形式插入不可见的输入字段

时间:2017-11-23 13:30:17

标签: django twitter-bootstrap django-crispy-forms

我有一个用于注册新用户的Django / Bootstrap crispy表单:

from django import forms
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Fieldset, ButtonHolder, Submit

class UserForm(forms.ModelForm):
    password = forms.CharField(widget=forms.PasswordInput(
        attrs={'autocomplete':'off',}))
    def __init__(self, *args, **kwargs):
        super(UserForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper(self)
        self.helper.layout = Layout(
            Fieldset(
                '',
                'username',
                'first_name',
                'last_name',
                'email',
                'password'
            ),
            ButtonHolder(
                Submit('submit', 'Submit', css_class='button white')
            )
        )

问题是浏览器自动填充会填写电子邮件和密码字段。围绕密码的Django crispy形式生成的HTML如下:

<div id="div_id_password" class="control-group">
    <label for="id_password" class="control-label requiredField">
        Password
        <span class="asteriskField">*</span>
    </label>
    <div class="controls">
        <input name="password" autocomplete="off" required="" id="id_password"
            class="textinput textInput" type="password">
    </div>
</div>

现在我明白关闭自动完成功能不起作用。所以我想通过Django crispy表单在密码之前插入一个不可见字段(display:none)的常用技巧,结果是:

<div id="div_id_password" class="control-group">
    <label for="id_password" class="control-label requiredField">
        Password
        <span class="asteriskField">*</span>
    </label>
    <div class="controls">
        <input type="text" style="display:none;">
        <input name="password" autocomplete="off" required="" id="id_password"
            class="textinput textInput" type="password">
    </div>
</div>

有没有一种很好的方法可以通过Djano crispy表单插入这个HTML,除非有另一种方法来阻止自动完成?

我正在使用Firefox / Linux Mint。

1 个答案:

答案 0 :(得分:0)

我使用JavaScript / jQuery来解决这个问题:

<script type="text/javascript">
    function clearPassword()
    {
        $('#id_password').val('');
    }
    window.onload = clearPassword;
</script>