如何在 Flask WTForms 密码字段中添加图标 "eye"

Question

希望将图标切换添加到密码字段。

在我的 forms.py 我有：

class LoginForm(FlaskForm):    
    email = StringField("Email Address", validators=[DataRequired(), Email()])
    eye_icon = Markup('<i class="icon-eye" id="togglePassword" style="margin-left: -30px; cursor: pointer;"></i>') # Not currently doing anything
    password = PasswordField("Password", validators=[DataRequired()])

在我的 login.html

 <div class="form-group">
  {% if form.email.errors %}
    {{ form.email(class_="form-control is-invalid", placeholder="Email") }}
    <div class="invalid-feedback">
    {% for error in form.email.errors %}
    <span> {{ error }} </span>
    {% endfor %}
    </div>
  {% else %}
    {{ form.email(class_="form-control ", placeholder="Email") }}
  {% endif %}
</div>
<div class="form-group">
  {% if form.password.errors %}
    {{ form.password(class_="form-control is-invalid", placeholder="Password") }}
    <div class="invalid-feedback">
      {% for error in form.password.errors %}
      <span> {{ error }} </span>
      {% endfor %}
    </div>
  {% else %}
    {{ form.password(class_="form-control shadow-none", placeholder="Password") }}
    <i class="icon-eye" id="togglePassword" style="margin-left: -30px; cursor: pointer;"></i>
  {% endif %}
</div>

我的 JS 可以在显示密码之间切换。我只是不知道如何让眼睛图标显示在密码字段的右侧，就像它在大多数登录屏幕上显示的那样

Answer 1

您可以从密码字段中删除样式，并将其应用于围绕密码字段和图标的 div。

Answer 2

我不得不将标签包装在一个 span 标签中，并在我的 css 中添加一个 class 以使其正常工作：

{{ form.password(class_="form-control ", placeholder="Password") }}
<span class="p-viewer"><i class="icon-eye" id="togglePassword" style="margin-left: 100px; cursor: pointer;"></i></span>

和css：

.p-viewer {
    z-index: 9999;
    position: absolute;
    top: 30%;
    right: 10px;
}

如何在 Flask WTForms 密码字段中添加图标 "eye"

How to Add icon "eye" in Flask WTForms PasswordField

python

flask

flask-wtforms

bootstrap-4