Domyślny kolor koloru wejściowego HTML5

Question

Domyślny kolor input type="color" jest czarny: #000000.

Nawet jeśli dam mu pustą wartość ...

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

... domyślnym kolorem jest zawsze czarny.

Chcę, aby użytkownik miał możliwość wybrania koloru, ale jeśli nie, oznacza to, że nie wybrano koloru, nawet białego #FFFFFF.

Czy istnieje sposób na wymuszenie, aby input type="color" nie miał domyślnie koloru czarnego?

Mogę użyć jakiegoś "słuchacza", aby sprawdzić, czy użytkownik zmienił kolor po raz pierwszy, jeśli nie, zignoruj ​​wartość, ale chciałbym uniknąć JavaScriptu.

Answer 1

Zastosowanie wartość:

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

Jeśli chcesz wiedzieć, czy wejście na niezmienionym poziomie, można zrobić coś takiego (z jQuery):

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

http://jsfiddle.net/j3hZB/

Answer 2

Edycja: Odtąd poprawnie zrozumiałem twoje pytanie, zaktualizowałem swoją odpowiedź.

Chociaż W3C Spec określa, że ​​atrybut value ma ciąg reprezentujący kolor, nie definiuje on domyślnego koloru. Myślę więc, że implementacja domyślnego koloru pozostawia się w gestii przeglądarki.

Jednak WhatWG Spec anwers pytanie z tej notatki,

Uwaga: Gdy element input type jest w stanie koloru, zawsze jest kolor wybrał, i nie ma sposobu, aby ustawić wartość do pustego ciągu.

Ponadto, w oparciu o oczekiwania, język CSS nie definiuje atrybut NULL dla każdego elementu, który sprawia, że ​​niemożliwe dla input type='color' mieć NULL jako wartości domyślnej.

Rozwiązanie:

Rozwiązaniem jest obecny w API cień DOM.

Korzystanie z Chrome Developer Tools, stwierdziliśmy, że możemy dać transparent kolor elementu pseudo ::-webkit-color-swatch własność -

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

Dla powyższego CSS, Twój HTML powinien podoba - <input type="color"> .Teraz nie musisz mieć żadnego słuchacza, który mógłby powiedzieć, czy użytkownik zmienił domyślny kolor, czy nie. Możesz po prostu traktować kolor transparent jako kolor NULL, na podstawie którego możesz podjąć decyzję, czy wartość została zmieniona, czy nie!

Jestem pewien, że znajdziesz podobny rodzaj informacji z DOMu Cienia dla Firefoksa, aby ustawić przezroczystą wartość dla tła. IE nadal pozostaje dla nas uciążliwe.

Answer 3

Podczas korzystania hexcode dla value atrybutu w <input type="color"> jedną rzeczą, jaką zauważyłem jest to, że musi być sześć cyfr, jeśli dla białych użyć #fff, to nie działa. Musi to być #ffffff.

To samo dzieje się podczas ustawiania przez javascript. document.querySelector('input[type="color"]').value = '#fff' nie działa. Kolor pozostaje czarny. Musisz użyć document.querySelector('input[type="color"]').value = '#ffffff', aby działał.

Coś, na czym należy uważać.

Answer 4

Nie wiem, czy ten problem jest dostępny tylko w wersji chrome, ale właśnie znalazłem szybką poprawkę dla chrome. Musimy ustawić wartość wejściową do #FFFFFF pierwszy, a potem ustawić go na wartość domyślną, domyślny kolor pojawi się zamiast czarnego

var element = document.querySelector('input[type="color"]'); 
element.value = '#FFFFFF'; //remember the hex value must has 7 characters 
element.value = element.defaultValue; 

Mam nadzieję, że ktoś pomoże :)

Answer 5

Oto moje rozwiązanie, Typ przełączania z tekstu do koloru wejście:

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

I wprowadziły tego rodzaju rozwiązanie dla mys elf. Wyświetla ładny "przezroczysty" przycisk. Po kliknięciu wyzwala normalny ukryty kolor wejściowy. Po podniesieniu koloru przezroczysty przycisk zostanie ukryty, a kolor wejściowy pojawi się.

Pozdrawiam.

function clickInputColor(button) 
 
{ 
 
\t $(button).next().click(); 
 
} 
 

 
function inputColorClicked(input) 
 
{ 
 
\t $(input).show(); 
 
\t $(input).prev().hide(); 
 
}

.inputEmptyColorButton { 
 
\t background:url("http://vickcreator.com/panel/images/transparent.png") center repeat; 
 
\t width: 50px; 
 
\t height: 1.5em; 
 
\t vertical-align: bottom; 
 
\t border: 1px solid #666; 
 
\t 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> 
 
\t \t \t \t \t <input onchange="inputColorClicked(this);" style="display: none;" type="color" value="" />