在输入字段内添加一个显示密码按钮 - 脆皮表格

Question

我想在密码输入字段中添加一个显示密码按钮。我使用脆皮形式进行样式设计，所以我有点坚持这里的最佳做法。

目前我有一个单独的复选框字段，它在检查时显示密码。 Js在这里工作正常。我想将 de checkbox 更改为输入字段内的眼睛图标。我已经设法通过 css 背景将眼睛图标添加到输入字段：url(path-to-icon).

我不知道如何将图标更改为按钮 (1) 并将我的 js 添加到其中 (2)。

我的表格：

class CustomSignupForm(SignupForm):
    user_group = forms.ModelChoiceField(queryset=Group.objects.exclude(name='admin').exclude(name='personeel').exclude(name='onderhoud'),
                                        widget=forms.RadioSelect(attrs={'placeholder': 'Soort klant:'}),
                                        initial=('particulier'), label='Soort klant'
                                        )
    first_name = forms.CharField(max_length=30,
                                 label='Voornaam',
                                 widget=forms.TextInput(attrs={'placeholder': 'Voornaam'}),)
    last_name = forms.CharField(max_length=30, 
                                label='Achternaam',
                                widget=forms.TextInput(attrs={'placeholder': 'Achternaam'}),)

我的 HTML :

<div class="form-row">
   <div class="form-group col-md-6 mb-0">
        <a>{{ form.password1 | as_crispy_field}}</a>
   </div>
   <div class="form-group col-md-6 mb-0">
        <a>{{ form.password2 | as_crispy_field}}</a>
   </div>
</div>

<div class="form-row">
   <div class="form-group col-md-12 mb-0">
        <input class="ml-2" type="checkbox" onclick="ShowPassword()"> show password
   </div>
</div>

我的css:

#id_password1 {
    background: url("http://127.0.0.1:8000/static/user/media/eye_icon.png") no-repeat;
    background-size: 20px 20px;
    background-position: right;
    background-position-x: 97%;
}

#id_password2 {
    background: url("http://127.0.0.1:8000/static/user/media/eye_icon.png") no-repeat;
    background-size: 20px 20px;
    background-position: right 10px;
    background-position-x: 97%;
}

我的 js :

function ShowPassword() {
    var x = document.getElementById("id_password");
      if (x.type === "password") {
       x.type = "text";
       } else {
       x.type = "password";
    }
}

有没有人有任何想法让这个工作？

Answer 1

你试过字体真棒吗？

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

将此添加到 base.html

<button class="btn"><i class="fa fa-eye"></i></button>

将此添加到您想要放置图标的位置。

.btn{
  cursor: pointer;
   }
 .btn-hover{
   background-color:YourChoice;
   }

相应地将其添加到您的 css 文件中。

Answer 2

谢谢！要使这项工作正常进行，只需要通过 crispy 表单助手在字段内创建一个带有按钮的自定义输入字段。虽然无法弄清楚如何做到这一点。现在有这样的东西：

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.layout = Layout(
            Field('password1', on_click="ShowPassword()")
        )

我现在的工作按钮：

<input type="image" class="ml-2" src="/static/user/media/eye_icon.png" onclick="ShowPassword()" id="show-password-button">

Answer 3

你可以试试：

Field(
 PrependedText('password',mark_safe('<span class ="glyphicon glyphicon-eye-open"></span>'), placeholder=_("Enter Password")))

Answer 4

快完成了！

HTML、CSS 和 JS 中的所有内容都做了。

HTML

<a>{{ form.password2 | as_crispy_field}}</a>
<button class="toggle-password ml-2 fa fa-eye"></button>

CSS

.toggle-password {
    position: absolute;
    top: 50%;
    right: 6%;
    width: 20px;
    height: 20px;
    border: none;
    background-color: transparent;
}

HTML

$("body").on('click','.toggle-password',function(){
    var $pass1 = document.getElementById("id_password1");
    var $pass2 = document.getElementById("id_password2");
    var toggle = $(this).toggleClass("fa-eye fa-eye-slash");
    [$pass1, $pass2].forEach(function($passwords) {
        if ($passwords.type === "password") {
        $passwords.type = "text";
        toggle.toggleClass()
        } else {
        $passwords.type = "password";
        }
    })

});

仍在想办法让两个图标同时切换。现在他们分开做。

在输入字段内添加一个显示密码按钮 - 脆皮表格

add a show password button inside of input field - crispy forms

html

css

django

jquery

django-crispy-forms