HTML5输入颜色的默认颜色(HTML5 input color's default col

的input type="color"具有默认颜色是黑色： #000000 。

即使我给它一个空值...

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

...默认的颜色是黑色始终。

我希望用户有选择颜色的选择，但如果他不就意味着没有颜色被选中，甚至没有白色#FFFFFF 。

有没有办法来强制input type="color"不是有黑色的默认？

我可以用某种“听众”的，以检查用户是否改变颜色，第一次如果不是，则忽略的价值，但我想避免的JavaScript。

Answer 1:

虽然采用了十六进制编码value的属性<input type="color">有一两件事我注意到的是，它必须是六位数字，如果你白用#fff ，这是行不通的。 它必须#ffffff 。

通过JavaScript设置，当同样的事情发生。 document.querySelector('input[type="color"]').value = '#fff'不起作用。 颜色保持黑色。 你必须使用document.querySelector('input[type="color"]').value = '#ffffff'为它工作。

事情要小心。

Answer 2:

使用价值：

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

如果你想知道，如果输入保持不变，你可以做这样的事情（使用jQuery）：

$(function(){
    $('input').change(function(){
       $(this).addClass('changed');
    })
})

http://jsfiddle.net/j3hZB/

Answer 3:

编辑：现在，因为我理解正确你的问题，我已经更新我的答案。

尽管W3C规格定义了value属性具有代表颜色的字符串，它没有定义的默认颜色。 所以，我认为默认颜色的实现在浏览器的自由裁量权留下。

然而， WHATWG规格 anwers你的问题与此注，

注意：当输入类型的元素是在颜色状态，总有一个彩色摄像，有没有办法将值设置为空字符串。

此外，基于你的预期下，CSS语言从未定义一个NULL为任何元素，这使得不可能对于属性input type='color'有NULL作为默认值。

解决方法：

解决方法是本阴影DOM API英寸

使用Chrome开发者工具，我发现，我们可以给出一个transparent颜色伪元素::-webkit-color-swatch的背景属性-

input[type=color]::-webkit-color-swatch 
{ 
    background-color: transparent !important; 
}

对于上述CSS，你的HTML谨此- <input type="color"> 。 现在，你不必有什么样的听众，告诉用户是否更改了默认的颜色或没有。 你可以简单地处理transparent为主色调为NULL颜色上，你可以做出决定的值是否被更改或不！

我相信，你会发现类似那种从阴影DOM信息为Firefox为背景设置透明值。 IE仍然是我们的一个痛。

Answer 4:

不知道这个问题只在Chrome推出的，但我只是找到了镀铬的快速修复。 我们需要设置输入值#FFFFFF第一，之后将其设置为默认值，默认的颜色会出现，而不是黑色

var element = document.querySelector('input[type="color"]');
element.value = '#FFFFFF'; //remember the hex value must has 7 characters
element.value = element.defaultValue;

希望它能帮助别人:)

Answer 5:

这里是我的解决方案，切换输入类型从文本到颜色：

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

Answer 6:

我已经实现了这种为自己的解决方案。 它显示了不错的“透明”按钮。 当点击它会触发隐藏正常输入的颜色。 当颜色被拾取，透明按钮将隐藏和输入颜色将显示出来。

干杯。

 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="" /> 

Answer 7:

答案可以是双重的。

1. 对于显示的目的，是的，你可以通过设置输入你想要的颜色的值设置一个默认的颜色。 你可以看到品种，这此页面上的答案。
2. 从技术上讲，没有。 这是不可能通过POST发送一个空值的颜色。 张贴的值将始终默认为#000000或您已设置默认值（如1中提到的）颜色。

---

这个经过一番思考，也许是这个实用的解决方案可能是选择#010101作为参考，以null或false或什么的。 这又给一些的jQuery（或javascript），以使其不太可能，这个值可以设置。

<input type="color" name="myColor" required="" />

举例来说，一方面被设置为所述色彩输入required可以给定的值#010101在事件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)

在服务器端验证的时间， #010101被认为是empty （或false ，等）。

<?php
$color = htmlspecialchars($_POST['myColor']);
if($color == "#010101") {
  // Do variable empty routine
} else {
  // Do variable has value routine
}
?>

*现在你可以相当肯定知道，如果用户设置的值，只要UA具有JavaScript功能。

其缺点是在负载的颜色的设置。 与预先设定的值刷新是不可能这样。 也许，这可以通过使用的sessionStorage的改善。*

但真正的问题是：我为什么这样做呢？ 我不认为它应该是neccessary，默认值为#000000是输入型的正常运作单一偏差 。 除了range输入类型，它也具有一个可选的默认值，该颜色输入类型有很大的不同。

文章来源: HTML5 input color's default color