Html HTML5 输入颜色的默认颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14943074/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 input color's default color
提问by Ali Bassam
The input type="color"has a default color which is black: #000000.
该input type="color"有一个默认的颜色是黑色的：#000000。
Even if I give it an empty value...
即使我给它一个空值......
<input type="color" value="" />
<input type="color" value="" />
...the default color is always black.
...默认颜色始终为黑色。
I want the user to have the option of picking a color, but if he doesn't it means no color was picked, not even white #FFFFFF.
我希望用户可以选择颜色，但如果他不选择，则意味着没有选择颜色，甚至没有选择 white #FFFFFF。
Is there a way to force an input type="color"not to have black color as default?
有没有办法强制input type="color"不将黑色作为默认颜色？
I can use some kind of a "listener" to check if the user changed the color for the first time, if not, ignore the value, but I would like to avoid Javascript.
我可以使用某种“侦听器”来检查用户是否第一次更改了颜色，如果没有，则忽略该值，但我想避免使用 Javascript。
回答by subham.saha1004
While using hexcode for valueattribute in <input type="color">, one thing I noticed is that it has to be six digits, if for white you use #fff, it does not work. It has to be #ffffff.
在使用 hexcode 作为value属性 in 时<input type="color">，我注意到的一件事是它必须是六位数，如果你使用白色#fff，它不起作用。它必须是#ffffff。
The same thing happens when setting it through javascript.
document.querySelector('input[type="color"]').value = '#fff'does not work. The color remains black.
You have to use document.querySelector('input[type="color"]').value = '#ffffff'for it to work.
通过javascript设置它时会发生同样的事情。
document.querySelector('input[type="color"]').value = '#fff'不起作用。颜色保持黑色。你必须使用document.querySelector('input[type="color"]').value = '#ffffff'它才能工作。
Something to be careful about.
有什么要小心的。
回答by ogur
Use value:
使用价值：
<input type="color" value="#ff00ff" />
If you want to know if input remain unchanged, you can do something like this (with jQuery):
如果您想知道输入是否保持不变，您可以执行以下操作（使用 jQuery）：
$(function(){
$('input').change(function(){
$(this).addClass('changed');
})
})
回答by Pankaj Parashar
Edit:Now since, I have understood your question correctly, I have updated my answer.
编辑：现在，我已经正确理解了你的问题，我已经更新了我的答案。
Although the W3C Specdefines that the valueattribute has a string representing the color, it doesn't define the default color. So I think that the implementation of default color is left at the discretion of the browser.
尽管W3C 规范定义value属性具有表示颜色的字符串，但它没有定义默认颜色。所以我认为默认颜色的实现是由浏览器决定的。
However, the WhatWG Specanwers your question with this note,
但是，WhatWG Spec通过此注释回答了您的问题，
Note:When the input type element is in the color state, there is always a color picked, and there is no way to set the value to the empty string.
注意：当输入类型元素处于颜色状态时，总会有一个颜色被拾取，并且没有办法将值设置为空字符串。
Moreover, based on your expectation, the CSS language never defined a NULLattribute for any element, which makes it impossible for the input type='color'to have NULLas the default value.
此外，根据您的预期，CSS 语言从未NULL为任何元素定义属性，这使得 不可能将input type='color'其NULL作为默认值。
Workaround:
解决方法：
The workaround is present in the Shadow DOM API.
解决方法存在于 Shadow DOM API 中。
Using Chrome Developer Tools, I found that we can give a transparentcolor to the pseudo element ::-webkit-color-swatchbackground property -
使用 Chrome 开发者工具，我发现我们可以为transparent伪元素::-webkit-color-swatch背景属性赋予颜色-
input[type=color]::-webkit-color-swatch
{
background-color: transparent !important;
}
For the above CSS, your HTML should like this - <input type="color">. Now you don't need to have any kind of listener to tell if the user has changed the default color or not. You can simply treat the transparentcolor as the NULL color based on which you can make a decision whether the value was changed or not!
对于上面的 CSS，你的 HTML 应该是这样的 - <input type="color">。现在您不需要任何类型的侦听器来判断用户是否更改了默认颜色。您可以简单地将transparent颜色视为 NULL 颜色，您可以根据它来决定值是否已更改！
I am sure that you will find similar kind of information from the Shadow DOM for Firefox to set transparent value for background. IE still remains a pain for us.
我相信你会从 Shadow DOM for Firefox 中找到类似的信息来设置背景的透明值。IE 对我们来说仍然是一个痛苦。
回答by JPA
The answer can be twofold.
答案可以是双重的。
- For display purposes, yes, you can set a default color just by setting the value of the input to the color you want. You can see varieties of this in the answers on this page.
- Technically, no. It is not possible to send an empty value as color through POST. The POSTed value will always default to
#000000or the color which you have set default (as mentioned in 1.).
- 出于显示目的，是的，您可以通过将输入值设置为您想要的颜色来设置默认颜色。您可以在本页的答案中看到各种各样的情况。
- 从技术上讲，没有。无法通过 POST 将空值作为颜色发送。POSTed 值将始终默认为
#000000或您设置的默认颜色（如 1. 中所述）。
After some thought on this, perhaps a practical solution for this might be to choose #010101as a reference to nullor falseor whatever. This leaves room for some jQuery (or javascript) to make it less likely that this value can be set.
这个经过一番思考，也许是这个实用的解决方案可能是选择#010101作为参考，null或false或什么的。这为某些 jQuery（或 javascript）留下了空间，以降低设置该值的可能性。
<input type="color" name="myColor" required="" />
For instance, on one hand the color inputs that are set to requiredcan be given the value #010101at event load. And to be sure, prevent users selecting the color #010101.
例如，一方面，设置为的颜色输入required可以#010101在 event 处赋值load。并且可以肯定的是，防止用户选择颜色 #010101。
(function($){
"use strict";
// Set all required color input values to #010101.
$(window).on("load", function() {
$("[type='color'][required]").val() == "#010101";
});
$("[type='color'][required]").on("change", function() {
// Prevent users selecting the color #010101.
if($(this).val() == "#010101") {
$(this).val() == "#000000";
}
});
})(jQuery)
At the time of server-side validation, #010101is considered as empty(or false, etc.).
在服务器端验证时，#010101被视为empty（或false等）。
<?php
$color = htmlspecialchars($_POST['myColor']);
if($color == "#010101") {
// Do variable empty routine
} else {
// Do variable has value routine
}
?>
*Now you can be pretty sure to know if the user has set the value, as long as the UA has javascript capabilities.
*现在您可以非常确定地知道用户是否设置了该值，只要 UA 具有 javascript 功能。
The drawback is the setting of the color on load. Reload with a pre-set value is not possible this way. Perhaps this can be improved with the use of sessionStorage.*
缺点是加载时的颜色设置。以这种方式无法使用预设值重新加载。也许这可以通过使用 sessionStorage 来改善。*
But the real point is: Why am I doing this? I don't think it should be neccessary, the default value of #000000is the single deviationfrom the normal workings of an input type. Except for the rangeinput type, which also has an optional default value, this color input type is very different.
但真正的重点是：我为什么要这样做？我不认为它应该是必要的，默认值#000000是与输入类型的正常工作的单一偏差。除了range输入类型，它也有一个可选的默认值，这个颜色输入类型有很大的不同。
回答by Vu Nguyen
Don't know if this issue is only available on chrome, but I just found the quick fix for chrome. We need to set the input value to #FFFFFF first and after that set it to default value, the default color will appear instead of black
不知道此问题是否仅在 chrome 上可用，但我刚刚找到了 chrome 的快速修复程序。我们需要先将输入值设置为#FFFFFF，然后将其设置为默认值，默认颜色将出现而不是黑色
var element = document.querySelector('input[type="color"]');
element.value = '#FFFFFF'; //remember the hex value must has 7 characters
element.value = element.defaultValue;
Hope it help someone :)
希望它可以帮助某人:)
回答by DigitCart
Here is my solution, switching input type from text to color:
这是我的解决方案，将输入类型从文本切换为颜色：
$(document).on('click', '.dc-color-input-switcher', function() {
var dcInputColor = $(this).parent().parent().prev();
if (dcInputColor.attr('type') == 'text') {
dcInputColor.attr('type', 'color');
} else {
dcInputColor.attr('type', 'text');
}
});
$(document).on('click', '.dc-color-input-clearer', function() {
var dcInputColor2 = $(this).parent().parent().next();
if (dcInputColor2.attr('type') == 'color') {
dcInputColor2.attr('type', 'text');
}
dcInputColor2.val('');
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
<div class="input-group-btn">
<div class="btn-group">
<span title="Empty" class="btn btn-danger dc-color-input-clearer" data-original-title="Empty Field"><i class="fa fa-times"></i></span>
</div>
</div>
<input name="product_tabs[1][0][bg_color]" value="" placeholder="Background Color" class="form-control pre-input-color" type="text">
<div class="input-group-btn">
<div class="btn-group">
<span title="Toggle color picker" class="btn btn-primary dc-color-input-switcher" data-original-title="Switch color picker"><i class="fa fa-paint-brush"></i></span>
</div>
</div>
</div>回答by DigitCart
I have implemented this kind of solution for myself. It displays nice "transparent" button. When clicked it triggers the normal hidden input-color. When color is picked up, the transparent button will hide and the input-color will show up.
我已经为自己实施了这种解决方案。它显示了漂亮的“透明”按钮。单击它会触发正常的隐藏输入颜色。拾取颜色后，透明按钮将隐藏，输入颜色将显示。
Cheers.
干杯。
function clickInputColor( button )
{
$( button ).next().click();
}
function inputColorClicked( input )
{
$( input ).show();
$( input ).prev().hide();
}.inputEmptyColorButton {
background:url("http://vickcreator.com/panel/images/transparent.png") center repeat;
width: 50px;
height: 1.5em;
vertical-align: bottom;
border: 1px solid #666;
border-radius: 3px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="clickInputColor( this );" class="inputEmptyColorButton"></button>
<input onchange="inputColorClicked( this );" style="display: none;" type="color" value="" />