HTML5 输入颜色默认颜色答案

【问题标题】：HTML5 input color's default colorHTML5 输入颜色默认颜色
【发布时间】：2013-02-03 06:48:05
【问题描述】：

input type="color" 的默认颜色为黑色：#000000。

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

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

...默认颜色始终为黑色。

我希望用户可以选择颜色，但如果他没有，则表示没有选择颜色，甚至没有选择白色#FFFFFF。

有没有办法强制input type="color" 默认不使用黑色？

我可以使用某种“监听器”来检查用户是否第一次更改了颜色，如果不是，则忽略该值，但我想避免使用 Javascript。

【问题讨论】：

我不太明白你的问题。你想要什么作为默认输入颜色？
@PankajParasha NULL，就像你有一个 <input type="text"/> 并且它没有价值一样。 HTML5 强制<input type="color"/> 具有默认颜色，即黑色，我需要它具有 NULL 值，这意味着，没有选择颜色。
现在明白你的问题了。我会相应地更新我的答案。
我现在用一个可能的解决方法更新了我的答案:)
看起来像在 Chrome 中，您可以指定 value="#"，它会在提交表单时返回 (#)。

标签： html input colors

【解决方案1】：

使用价值：

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

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

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

http://jsfiddle.net/j3hZB/

【讨论】：

但是如果用户确实喜欢预定的颜色并因此保持原样怎么办？这并不意味着用户没有选择颜色，只是他喜欢它的本来面目。
那么输入不会得到“更改”类，您必须将该事实用作非选择状态。
明白。虽然如果你有这样的表格：你最喜欢的颜色：color input，你最喜欢的食物：text input，等等，并且已经选择了用户最喜欢的颜色，你的脚本会让用户最喜欢的颜色处于未定状态。
当您尝试对花哨的表单使用常规输入时会发生这种情况 :) 它总是需要一些额外的复选框等。单选按钮也存在类似问题，一旦您选择了一个，您就无法设置未选中状态。跨度>

【解决方案2】：

编辑：既然我已经正确理解了你的问题，我已经更新了我的答案。

虽然W3C Spec 定义了value 属性有一个表示颜色的字符串，但它没有定义默认颜色。所以我认为默认颜色的实现由浏览器自行决定。

不过，WhatWG Spec 会通过此说明回答您的问题，

注意：当输入类型元素处于颜色状态时，总是有一个颜色被选中，无法将值设置为空字符串。

此外，根据您的预期，CSS 语言从未为任何元素定义NULL 属性，这使得input type='color' 不可能将NULL 作为默认值。

解决方法：

Shadow DOM API 中提供了解决方法。

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

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

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

我相信你会从 Firefox 的 Shadow DOM 中找到类似的信息来设置背景的透明值。 IE 对我们来说仍然很痛苦。

【讨论】：

即使选择了颜色也总是透明的
这只是外观的解决方案，不适用于 POSTed 值。如果此输入类型以表单形式提交，则无法知道用户是否选择了颜色。顺便说一句，范围输入类型也是如此，其中 value 属性也被选为默认值的“持有者”。 IMO 没有正确考虑这一点。但我可能是错的。相反，我希望如此。因为现在这些类型的输入对我来说几乎没用
@JPA：我也遇到过很多情况，最终用户无法选择“未定义”是个大问题。我还没有找到好的解决方法。我可以对现有 HTML5 控件做的最接近的事情是在所有此类控件之前添加一个带有选项“使用默认/未设置”和“自定义值：”的单选按钮。

【解决方案3】：

虽然在<input type="color"> 中为value 属性使用十六进制代码，但我注意到它必须是六位数，如果对于白色你使用#fff，它不起作用。它必须是#ffffff。

通过 javascript 设置时也会发生同样的事情。 document.querySelector('input[type="color"]').value = '#fff' 不起作用。颜色保持黑色。您必须使用 document.querySelector('input[type="color"]').value = '#ffffff' 才能使其工作。

注意事项。

【讨论】：

是的，这是因为W3C Spec 定义value 属性必须正好包含7 个字符，以# 开头，然后是6 个十六进制字符。也不允许使用诸如 red、blue 之类的事实颜色关键字。
这是我一直在寻找的答案

【解决方案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;

希望对某人有所帮助:)

【讨论】：

【解决方案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>

【讨论】：

【解决方案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="" />

【讨论】：

【解决方案7】：

答案可能是双重的。

出于显示目的，是的，您可以通过将输入值设置为您想要的颜色来设置默认颜色。您可以在此页面上的答案中看到各种各样的问题。
技术上，没有。无法通过 POST 将空值作为颜色发送。 POSTed 值将始终默认为 #000000 或您设置的默认颜色（如 1 中所述）。

经过深思熟虑后，一个实际的解决方案可能是选择#010101 作为null 或false 或其他的引用。这为一些 jQuery（或 javascript）留出了空间，以降低设置该值的可能性。

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

例如，一方面，设置为required 的颜色输入可以在事件load 中赋予值#010101。并且可以肯定的是，防止用户选择颜色#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输入类型，也有一个可选的默认值，这个颜色输入类型是很不一样的。

【讨论】：

【解决方案8】：

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

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

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

【讨论】：