如何获取颜色输入框的颜色名称而非HEX值——基于datalist

type="color" 输入框本身只会返回选中的HEX颜色值，无法直接获取datalist选项的文本名称。要实现显示颜色名称，需要通过HEX值匹配对应的option元素，提取其文本内容。

修改后的完整代码 #

HTML

<form action="">
  <label for="username">Username:</label>
  <input type="text" name="username" id="username"> <br>
  <label for="email">Email:</label>
  <input type="email" name="email" id="email"> <br>
  <label for="color">Favorite color:</label>
  <!-- 给颜色输入框添加id，方便获取 -->
  <input type="color" list="presets" id="color">
  <datalist id="presets">
    <option value="#000000">Black</option>
    <option value="#cccccc">Grey</option>
    <option value="#ffffff">White</option>
    <option value="#0000ff">Blue</option>
    <option value="#ff0000">Red</option>
    <option value="#00ff00">Green</option>
  </datalist>
  <button>Submit</button>
</form>

JavaScript

const button = document.querySelector("button");
const email = document.querySelector("#email");
const username = document.querySelector("#username");
const colorInput = document.querySelector("#color");

button.addEventListener("click", function(e) {
  e.preventDefault();
  // 根据HEX值匹配对应的option元素
  const selectedOption = document.querySelector(`#presets option[value="${colorInput.value}"]`);
  // 如果找到预设选项，显示名称；否则显示HEX值
  const colorName = selectedOption ? selectedOption.textContent : colorInput.value;
  alert(`Username: ${username.value} \nE-Mail: ${email.value} \nFavorite color: ${colorName}`);
})

关键说明 #

• 给颜色输入框添加id="color"，简化DOM选择逻辑
• 通过#presets option[value="${colorInput.value}"]精准匹配选中的预设选项
• 增加判断逻辑：如果用户选择了预设外的颜色（手动输入HEX），则直接显示HEX值，避免出现undefined

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