Html 如何在使用flask和flask_wtf表单时切换密码可见性？_Html_Python 3.x_Flask

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

html python-3.x flask

Html 如何在使用flask和flask_wtf表单时切换密码可见性？,html,python-3.x,flask,Html,Python 3.x,Flask,我刚开始学习flask，我想知道如何通过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'

我刚开始学习flask，我想知道如何通过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)

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

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

forms.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)

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（）}}
{{form.name.label}{{form.name（size=20）}
显示密码

现在我知道

{{form.hidden_tag（）}}

是隐藏输入字段，但是如何切换可见性？

您可以使用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')