добавить кнопку показа пароля внутри поля ввода - четкие формы

Question

Я хочу добавить кнопку показа пароля внутри поля ввода пароля. Я использую четкие формы для стилизации, поэтому я немного придерживаюсь лучших практик.

В настоящее время у меня есть отдельное поле флажка, в котором отображается пароль при проверке. Js здесь работает нормально. Я хотел бы изменить флажок de на значок глаза, который находится внутри поля ввода. Мне удалось добавить значок глаза в поле ввода через css background: 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

Почти готово!

Сделано все в 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";
        }
    })

});

Все еще пытаюсь понять, как заставить оба значка переключаться одновременно. Теперь они делают это по отдельности.

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

Answer 3

Вы можете попробовать:

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

Answer 4

Вы пробовали отличный шрифт?

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

Добавьте это в базу. html

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

Добавьте это там, где хотите разместить значок.

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

Добавьте это в свой css файл соответственно.