如何在使用 flask 和 flask_wtf 表单时切换密码可见性？答案

【问题标题】：How to toggle password visibility while using flask and flask_wtf forms?如何在使用 flask 和 flask_wtf 表单时切换密码可见性？
【发布时间】：2020-02-23 00:22:57
【问题描述】：

我刚开始学习烧瓶，我想知道如何通过在 html 中添加的按钮来切换密码字段的可见性，但我无法弄清楚。 app.py

from flask import Flask
from flask import render_template, url_for, flash, redirect
from forms import MyForm

app = Flask(__name__)
app.config['SECRET_KEY'] = '40928745c948f3f1e67703b23b49b9c5'

@app.route('/', methods=('GET', 'POST'))
def home():
    form = MyForm()
    return render_template('home.html', form=form)

if __name__ == '__main__':
    app.run(debug=True)

forms.py

from flask_wtf import FlaskForm
from wtforms import PasswordField
from wtforms.validators import DataRequired

class MyForm(FlaskForm):
    password = PasswordField('password', validators=[DataRequired()])

home.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Sample</title>
  </head>
  <body>
    <form method="POST" action="/">
  {{ form.hidden_tag() }}
  {{ form.name.label }} {{ form.name(size=20) }}
  <input type="submit" value="Go">
  <button type="button" name="">Show Password</button> <! –– Using this button, toggle password visibilty -- !>
</form>
  </body>
</html>

现在我知道{{ form.hidden_tag() }} 是隐藏输入字段，但如何切换可见性？

【问题讨论】：

标签： html python-3.x flask

【解决方案1】：

你可以使用 JavaScript

home.html

window.addEventListener("load", function(){
    var checkbox  = document.getElementById('{{form.check.id}}');
    var x = document.getElementById(''{{form.password.id}}'');
    checkbox.addEventListener('change', function() {
        if(this.checked) {
            x.type = 'text'; 
        } else {
            x.type = 'password'; 
        }
    });
});

forms.py

  class MyForm(FlaskForm):
  password = PasswordField('password', validators=[DataRequired()],id='password')
  show_password = BooleanField('Show password', id='check')

【讨论】：