如何在JavaScript/HTML中让用户仅选择指定的颜色选项？

你当前使用的type="color"输入框默认支持全色域选择，要严格限制仅能选择红、蓝、黄三种颜色，更友好的方式是直接提供固定选项（而非拦截用户的非法选择），以下是两种可行方案：

方案一：使用颜色按钮组（直观便捷） #

直接创建对应颜色的按钮，用户点击按钮即可切换背景色，完全限制可选范围：

HTML 代码 #

<div class="color-selector">
  Pick a color:
  <button class="color-btn" data-color="#ff0000" style="background: #ff0000; width: 24px; height: 24px; border: none; border-radius: 4px; margin: 0 4px; cursor: pointer;"></button>
  <button class="color-btn" data-color="#0000ff" style="background: #0000ff; width: 24px; height: 24px; border: none; border-radius: 4px; margin: 0 4px; cursor: pointer;"></button>
  <button class="color-btn" data-color="#ffff00" style="background: #ffff00; width: 24px; height: 24px; border: none; border-radius: 4px; margin: 0 4px; cursor: pointer;"></button>
</div>

JavaScript 代码 #

// 获取所有颜色按钮
const colorButtons = document.querySelectorAll('.color-btn');

// 为每个按钮绑定点击事件
colorButtons.forEach(btn => {
  btn.addEventListener('click', function() {
    const selectedColor = this.getAttribute('data-color');
    document.body.style.backgroundColor = selectedColor;
  });
});

方案二：使用单选框+颜色预览（适合表单场景） #

如果需要结合表单提交逻辑，可使用单选框搭配颜色预览块，用户选择单选框时切换背景色：

HTML 代码 #

<div class="color-selector">
  Pick a color:
  <label class="color-option">
    <input type="radio" name="bg-color" value="#ff0000" checked>
    <span class="color-preview" style="background: #ff0000;"></span> Red
  </label>
  <label class="color-option">
    <input type="radio" name="bg-color" value="#0000ff">
    <span class="color-preview" style="background: #0000ff;"></span> Blue
  </label>
  <label class="color-option">
    <input type="radio" name="bg-color" value="#ffff00">
    <span class="color-preview" style="background: #ffff00;"></span> Yellow
  </label>
</div>

补充 CSS（优化预览样式） #

.color-preview {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin: 0 4px;
  vertical-align: middle;
}
.color-option {
  margin-right: 12px;
  cursor: pointer;
}

JavaScript 代码 #

// 获取所有背景色单选框
const colorRadios = document.querySelectorAll('input[name="bg-color"]');

// 绑定切换事件
colorRadios.forEach(radio => {
  radio.addEventListener('change', function() {
    if (this.checked) {
      document.body.style.backgroundColor = this.value;
    }
  });
});

// 初始化页面背景为默认选中的颜色
document.body.style.backgroundColor = document.querySelector('input[name="bg-color"]:checked').value;

（不推荐）保留type="color"输入框的校验方案 #

如果一定要保留原输入框，可通过校验拦截非法颜色，但用户体验较差（需纠正错误选择）：

修改后的 JavaScript 代码 #

function colorSelected(element) {
  // 定义允许的颜色（注意：type="color"返回小写十六进制值）
  const allowedColors = ['#ff0000', '#0000ff', '#ffff00'];
  const selectedColor = element.value.toLowerCase();

  if (allowedColors.includes(selectedColor)) {
    document.body.style.background = selectedColor;
  } else {
    // 重置输入框并提示用户
    element.value = '';
    alert('仅允许选择红、蓝、黄三种颜色');
  }
}

内容的提问来源于stack exchange，提问作者Danyal Chatha