时间戳

首页 > 解决方案 > 在输入字段内添加一个显示密码按钮 - 酥脆的表格

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

问题描述

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

目前我有一个单独的复选框字段，显示检查密码。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";
    }
}

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

标签： htmljquerycssdjangodjango-crispy-forms

解决方案

你试过字体真棒吗？

<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 文件中。

推荐阅读