HTML5 輸入顏色的默認顏色

Question

input type="color"的默認顏色為黑色： #000000 。

即使我給它一個空值......

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

...默認顏色始終為黑色。

我希望用戶可以選擇顏色，但如果他不選擇，則意味着沒有選擇顏色，甚至沒有選擇白色#FFFFFF 。

有沒有辦法強制input type="color"不將黑色作為默認值？

我可以使用某種“偵聽器”來檢查用戶是否第一次更改了顏色，如果沒有，則忽略該值，但我想避免使用 Javascript。

Answer 1

在<input type="color">對value屬性使用十六進制代碼時，我注意到的一件事是它必須是六位數字，如果對於白色，您使用#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 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 顏色，您可以根據它來決定是否更改值！

我相信你會從 Shadow DOM for Firefox 中找到類似的信息來設置背景的透明值。 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

不知道此問題是否僅在 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 6

答案可以是雙重的。

1. 出於顯示目的，是的，您可以通過將輸入值設置為您想要的顏色來設置默認顏色。 您可以在本頁的答案中看到各種各樣的情況。
2. 從技術上講，沒有。 無法通過 POST 將空值作為顏色發送。 POSTed 值將始終默認為#000000或您設置的默認顏色（如 1. 中所述）。

---

在對此進行一些思考之后，也許對此的實際解決方案可能是選擇#010101作為對null或false或其他任何內容的引用。 這為某些 jQuery（或 javascript）留下了空間，以降低設置該值的可能性。

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

例如，一方面，設置為required的顏色輸入可以在 event 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輸入類型，它也有一個可選的默認值，這個顏色輸入類型有很大的不同。

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 時，它不起作用。