如何将Bootstrap颜色选择器默认编辑模式设置为Hex？

原生的<input type="color">没有官方提供的属性或API可以强制默认打开Hex模式，因为这个控件的界面逻辑是由浏览器厂商自主实现的——不同浏览器（比如Chrome、Firefox、Safari）的颜色选择器布局、默认显示模式都存在差异，目前没有统一的标准来控制这一行为。

如果需要确保默认进入Hex模式，最可靠的方案是使用自定义颜色选择器组件，完全掌控界面交互逻辑，具体思路如下：

• 隐藏原生的<input type="color">控件
• 自定义一个Hex格式的输入框作为默认交互入口
• 通过按钮触发原生颜色选择器，选色后同步值到Hex输入框
• 支持用户手动输入Hex值并同步到原生控件

以下是一个简单的实现示例：

<div class="custom-color-picker">
  <!-- 隐藏原生颜色选择器 -->
  <input type="color" id="nativeColorPicker" hidden>
  <!-- 默认显示Hex输入框 -->
  <input type="text" id="hexInput" placeholder="#RRGGBB" pattern="#[0-9A-Fa-f]{6}" value="#ffffff">
  <!-- 触发原生选色的按钮 -->
  <button id="openPickerBtn">打开颜色选择器</button>
</div>

<script>
const nativePicker = document.getElementById('nativeColorPicker');
const hexInput = document.getElementById('hexInput');
const openBtn = document.getElementById('openPickerBtn');

// 点击按钮打开原生颜色选择器
openBtn.addEventListener('click', () => nativePicker.click());

// 原生选择器选色后，同步值到Hex输入框
nativePicker.addEventListener('input', (e) => {
  hexInput.value = e.target.value;
});

// Hex输入框手动输入合法值后，同步到原生选择器
hexInput.addEventListener('input', (e) => {
  const hexVal = e.target.value.trim();
  if (/^#[0-9A-Fa-f]{6}$/.test(hexVal)) {
    nativePicker.value = hexVal;
  }
});
</script>

这种方式可以保证用户打开时默认看到Hex输入框，同时保留原生颜色选择器的可视化选色能力，完全满足需求。

内容的提问来源于stack exchange，提问作者Khaled Alhayek