HTML颜色选择器输入

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

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

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

此外，它将是很好的显示十六进制值生成。在铬中，它只显示一个带有选定颜色背景的按钮框。

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

来源

2015-10-01 Your Friend Ken

是否有任何HTML属性故障转移到别的吗？答案是否定的。 – Rob

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

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

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

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

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

如果你想显示给用户，你可以使用该值时onchange触发input元素填充另一个元素。

来源

2015-10-01 21:53:47 arcyqwerty

我试图避免在另一个元素中显示十六进制值。如果浏览器不支持颜色输入类型，您可能会有重复的信息。如果有一个干净的CSS解决方案，这将是很好的。 –

如果你确实需要一个元素，你可以在JS中使用'content（#xxxxxx）'设置CSS'：before'或'：after'。 – arcyqwerty

我不知道是否有一种方法可以通过javascript调用本地浏览器的颜色选择器并捕获结果？ –

这里是我最终使用：

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

来源

2015-10-02 20:04:03

HTML颜色选择器输入

回答

相关问题