使用WTForms组件时如何实现表单字段值同步更新

我用WTForms内置组件构建了一个简单的颜色输入表单，其中ColorInput组件只展示颜色选择器，不支持手动输入文本。于是我新增了一个仅支持文本输入的color字段，希望实现color和color1（ColorInput对应的字段）在输入时互相同步值。但作为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>

要实现两个字段互相同步，需要借助JavaScript监听输入事件，在其中一个字段值变化时更新另一个字段的值，具体操作如下：

1. 确认字段ID
   WTForms默认会给每个表单字段生成对应ID，格式就是字段名，比如color字段的ID是color，color1字段的ID是color1，你可以通过查看页面源码确认。

2. 添加同步逻辑的JavaScript代码
   在HTML表单的下方加入以下脚本即可实现双向同步：

// 获取两个输入元素
const textColorInput = document.getElementById('color');
const pickerColorInput = document.getElementById('color1');

// 文本框输入时，同步更新颜色选择器
textColorInput.addEventListener('input', function() {
  pickerColorInput.value = this.value;
});

// 颜色选择器选色时，同步更新文本框
pickerColorInput.addEventListener('input', function() {
  textColorInput.value = this.value;
});

3. 完整HTML示例

<form action="" method="post">
     <p>
      {{form.color1.label}} <br>
      {{form.color}} {{form.color1}}
     </p>
     <p>
      {{form.submit()}}
     </p>
   </form>

<script>
const textColorInput = document.getElementById('color');
const pickerColorInput = document.getElementById('color1');

textColorInput.addEventListener('input', function() {
  pickerColorInput.value = this.value;
});

pickerColorInput.addEventListener('input', function() {
  textColorInput.value = this.value;
});
</script>

这样操作后，在文本框输入十六进制颜色代码时，颜色选择器会自动切换到对应颜色；用颜色选择器选色时，文本框也会同步显示对应的十六进制颜色值。

内容的提问来源于stack exchange，提问作者Tim Payne