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

【问题标题】：add a show password button inside of input field - crispy forms在输入字段内添加一个显示密码按钮 - 酥脆的表格
【发布时间】：2020-10-10 23:57:00
【问题描述】：

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

目前我有一个单独的复选框字段，显示检查密码。 Js在这里工作正常。我想将 de 复选框更改为输入字段内的眼睛图标。我已经设法通过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";
    }
}

有没有人有任何想法来完成这项工作？

【问题讨论】：

标签： html jquery css django django-crispy-forms

【解决方案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 文件中。

【讨论】：

【解决方案2】：

谢谢！使这项工作正常工作只需要通过脆皮表单助手使用字段内部的按钮创建一个自定义输入字段。无法弄清楚如何做到这一点。现在得到了类似的东西：

    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">

【讨论】：

【解决方案3】：

你可以试试：

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

【讨论】：

【解决方案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";
        }
    })

});

仍在研究如何让两个图标同时切换。现在他们分开做。

【讨论】：