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

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

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

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

尽管W3C 规范定义value属性具有表示颜色的字符串，但它没有定义默认颜色。所以我认为默认颜色的实现是由浏览器决定的。

但是，WhatWG Spec通过此注释回答了您的问题，

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

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

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