我正在构建一个非常简单的颜色输入表单，并使用内置的 wtforms 小部件。这仅显示颜色选择器并且不允许文本输入，但希望让用户能够执行任一操作。所以我创建了另一个仅包含文本值的字段。
当其他更改输入时，如何更新我的 color/color1 字段？无论如何，我看不到将“事件”附加到表单条目。我对 Python/Flask/WTForms/Jinja 很陌生，所以解决方案可能很明显，但我无法解决！
这是我的简单形式类
class UserInput(FlaskForm):
color = StringField('color', default="#00ff00")
color1 = StringField('color1', widget=widgets.ColorInput(), default='#00ff00')
submit = SubmitField('Go')
这是我的html代码
<form action="" method="post">
<p>
{{form.color1.label}} <br>
{{form.color}} {{form.color1}}
</p>
<p>
{{form.submit()}}
</p>
</form>
由于 jinja 是在服务器端呈现的，因此您无法立即对用户输入做出反应，因此一个输入字段会更新另一个输入字段。为了实现这一点，您需要在客户端执行 JavaScript。
以下示例在两个输入字段中注册
change<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Index</title>
</head>
<body>
<form action="" method="post">
{{ form.csrf_token }}
<div>
{{form.color1.label}}
{{form.color}} {{form.color1}}
</div>
<div>
{{form.submit()}}
</div>
</form>
<script>
(function() {
const elems = ['color1', 'color'].map((id) => document.getElementById(id));
elems.forEach(elem => {
elem.addEventListener('change', (event) => {
const value = event.target.value;
elems.forEach(el => el.value = value);
});
});
})();
</script>
</body>
</html>