实现文本输入框与颜色选择框双向联动的通用JavaScript函数

嘿，这个双向同步颜色输入的需求挺实用的，我给你整理了完整的可运行实现，还加了点细节优化，比如自动补#和格式校验，避免无效输入的问题：

完整实现代码 #

<body>
  <input type="text" id="txtColor" placeholder="输入十六进制颜色，如#FF0000">
  <input type="color" id="colColor" value="#ffffff">
  <script>
    // 获取两个输入控件的DOM元素
    const txtColor = document.getElementById("txtColor");
    const colColor = document.getElementById("colColor");

    // 文本框输入内容时，同步到颜色选择器
    txtColor.addEventListener('input', function() {
      let inputValue = this.value.trim();
      
      // 如果用户没输入#，自动补全前缀
      if (inputValue && !inputValue.startsWith('#')) {
        inputValue = '#' + inputValue;
      }
      
      // 校验十六进制颜色的合法性（支持3位和6位格式）
      const validColorRegex = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
      if (validColorRegex.test(inputValue)) {
        colColor.value = inputValue;
      }
    });

    // 颜色选择器选色后，同步到文本框
    colColor.addEventListener('input', function() {
      txtColor.value = this.value;
    });
  </script>
</body>

功能细节说明 #

• 文本框采用input事件实现实时同步，如果需要失去焦点才同步，把input换成blur即可
• 自动补全#前缀：用户只输入FF0000或F00这类字符时，会自动转为标准的#FF0000/#F00格式
• 格式校验：通过正则确保只有合法的十六进制颜色值才会同步，避免无效输入导致颜色选择器无响应
• 颜色选择器选色后，文本框会立刻显示对应的标准十六进制颜色值（始终带#，6位格式）

内容的提问来源于stack exchange，提问作者bobby.dreamer