html - HTML5 输入颜色的默认颜色

Question

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

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

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

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

我希望用户可以选择一种颜色，但如果他没有，这意味着没有选择颜色，甚至没有选择白色#FFFFFF。

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

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

Answer 1

在使用 hexcode 的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 规范通过此说明回答了您的问题，

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

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

解决方法：

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 颜色，您可以根据它来决定值是否已更改！

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

Answer 4

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

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

答案可能是双重的。

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

---

在对此进行了一些思考之后，也许对此的实际解决方案可能是选择#010101作为参考null或false或其他。这为一些 jQuery（或 javascript）留出了空间，以减少可以设置此值的可能性。

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

例如，一方面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)

在服务器端验证时，#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 6

不知道这个问题是否仅在 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 7

我已经为自己实施了这种解决方案。它显示漂亮的“透明”按钮。单击它会触发正常的隐藏输入颜色。拾取颜色时，透明按钮将隐藏，输入颜色将显示。

干杯。

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 8

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

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

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