Question

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 Spec定义value属性有一个表示颜色的字符串，但它没有定义默认颜色。所以我认为默认颜色的实现由浏览器自行决定。

但是，WhatWG Spec通过此便笺回答了您的问题，

注意：当输入类型元素处于颜色状态时，始终会拾取颜色，并且无法将值设置为空字符串。

此外，根据您的期望，CSS语言从未为任何元素定义NULL属性，这使input type='color'无法将NULL作为默认值。< / p>

解决方法：

解决方法出现在Shadow DOM API中。

使用Chrome开发者工具，我发现我们可以为伪元素transparent背景属性提供::-webkit-color-swatch颜色 -

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

对于上述CSS，您的HTML应该是这样的 - <input type="color">。现在，您不需要任何类型的侦听器来判断用户是否更改了默认颜色。您可以简单地将transparent颜色视为NULL颜色，您可以根据该颜色判断值是否已更改！

我相信你会从Shadow DOM for Firefox中找到类似的信息，为背景设置透明值。 IE仍然是我们的痛苦。

Answer 4

不知道此问题是否仅适用于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;

希望它可以帮到某人：）

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

我已经为自己实施了这种解决方案。它显示出很好的透明度＃34;按钮。单击时，它会触发正常的隐藏输入颜色。拾取颜色时，透明按钮将隐藏，输入颜色将显示。

干杯。

＆＃13;

function clickInputColor( button )
{
	$( button ).next().click();
}

function inputColorClicked( input )
{
	$( input ).show();
	$( input ).prev().hide();
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 7

答案可能是双重的。

出于显示目的，是的，您可以仅通过将输入值设置为所需的颜色来设置默认颜色。您可以在此页面的答案中看到各种变化。
从技术上讲，没有。无法通过POST发送空值作为颜色。 POSTed值将始终默认为#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来改善。*

但是真正的重点是：为什么要这样做？我认为这不是必需的，#000000的默认值是与输入类型正常工作的唯一偏差。除了range输入类型（还有可选的默认值）之外，此颜色输入类型也非常不同。

Answer 8

这适用于设置与黑色不同的默认颜色：

   <input
        type="color"
        value="#123456"
        onChange={(e) => handleBGColor(e)}
    ></input>

但是，当我使用诸如“#000”或“#FFF”之类的速记 3 十六进制值而不是上面的 6 时，它不起作用。

HTML5输入颜色的默认颜色

8 个答案: