如何在HTML JavaScript中实现字段变更时自动更新JSON字段？

直接用原生JavaScript就能搞定，核心是监听输入框的内容变化，实时组装JSON并更新目标字段。

完整代码 #

<html>
  <body>
    <form>
      <div>
        <input id="brand" name="brand" type="text" value="toyota">
      </div>
      <div>
        <input id="color" name="color" type="text" value="blue">
      </div>
      <div>
        <input id="json_field" name="json_field" type="text" value='{"brand": "toyota", "color": "blue"}' size=50 readonly>
      </div>
    </form>
    <script>
      // 获取表单元素
      const brandInput = document.getElementById('brand');
      const colorInput = document.getElementById('color');
      const jsonField = document.getElementById('json_field');

      // 定义更新JSON字段的函数
      function updateJsonField() {
        // 收集当前输入值
        const formData = {
          brand: brandInput.value.trim(),
          color: colorInput.value.trim()
        };
        // 转成格式化的JSON字符串并赋值
        jsonField.value = JSON.stringify(formData, null, 2);
      }

      // 给输入框绑定实时监听事件
      brandInput.addEventListener('input', updateJsonField);
      colorInput.addEventListener('input', updateJsonField);
    </script>
  </body>
</html>

关键细节说明 #

• 实时触发更新：用input事件而非change事件，用户每输入一个字符就会同步更新JSON，无需等到输入框失去焦点。
• JSON格式化：JSON.stringify的第三个参数设为2，会生成带缩进的易读格式；如果需要紧凑格式，直接用JSON.stringify(formData)即可。
• 去空格处理：trim()用于去除输入内容前后的冗余空格，不需要的话可以直接删掉这个方法。

内容的提问来源于stack exchange，提问作者Bino Oetomo