Question

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

＆＃13;

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

＆＃13;

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

同样显示生成的十六进制值也很好。在chrome中，它只显示一个带有所选颜色背景的按钮框。

有没有办法设置HTML颜色输入的样式以显示所选颜色的十六进制值？

Answer 1

以下是我最终使用的内容：

$("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>

Answer 2

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

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

有没有办法设置HTML颜色输入的样式以显示所选颜色的十六进制值？

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

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

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

HTML颜色选择器输入

2 个答案: