HTML颜色选择器输入

我今天正在研究一个HTML表单，并且当我发现（偶然发现）输入类型'color'实际上在chrome中创建了一个颜色选择器（以及firefox http://caniuse.com/#feat）时，需要创建一个颜色选择器=输入的颜色）。

<input type="color" value="#333" />

---

是否有任何使用颜色输入类型的例子优雅地故障转移到其他选择器？

如果颜色输入不可用，您可以找到方法优雅地回退到另一个颜色选择器。 例如，https://github.com/bgrins/spectrum。 （尝试搜索其他选项的“输入颜色填充”）。

有没有一种方法来设置HTML颜色输入以显示所选颜色的十六进制值？

对于我的Chrome（45.0.2454.93），它在选择时显示颜色选择器中的十六进制值。 如果您想在选择后显示它，则输入值将显示为十六进制。

document.querySelector('input[type=color]').value

如果要将其显示给用户，则可以在为输入元素触发onchange时使用该值填充另一个元素。

---

这是我最终使用的：

$("input.color").each(function() {
  var that = this;
  $(this).parent().prepend($("<i class='fa fa-paint-brush color-icon'></i>").click(function() {
    that.type = (that.type == "color") ? "text" : "color";
  }));
}).change(function() {
  $(this).attr("data-value", this.value);
  this.type = "text";
});

label {
  font-family: sans-serif;
  width: 300px;
  display: block;
  position: relative;
}
input {
  padding: 5px 15px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
}
input[type=color] {
  padding: 0;
  border: 0;
  height: 40px;
}
input[type=color]:after {
  content: attr(data-value);
  position: absolute;
  bottom: 10px;
  text-align: center;
  color: #fffff5;
  display: block;
  width: 100%;
}
.color-icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: #666;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label>
  Color:
  <br />
  <input class="color" placeholder="#XXXXXX" data-value="#xxxxxx" />
</label>

链接地址: http://www.djcxy.com/p/15437.html

上一篇: HTML Color selector input

下一篇: How do I get the color from a hexadecimal color code using .NET?