input type="color"は黒で、デフォルトの色があります：#000000。私はそれを空の値を与えた場合でもHTML5入力色のデフォルトの色
...
<input type="color" value="" />
は...デフォルトの色は常に黒です。
色を選択するオプションが必要ですが、ユーザーが色を選択しないようにするには、色が選択されていないことを意味します。白色でなくても、#FFFFFFです。
デフォルトとして黒の色を持っていないinput type="color"を強制する方法はありますか？
私は、ユーザーが初めての色を変更しているかどうかを確認するために、「リスナー」のいくつかの種類を使用し、そうでない場合は、値を無視し、私はJavascriptを避けたいことができます。
使用値：
<input type="color" value="#ff00ff" />
あなたが入力が変わらない場合、あなたは（jQueryを使って）このような何かを行うことができます知りたい場合は、次の
$(function(){
$('input').change(function(){
$(this).addClass('changed');
})
})
編集：あなたの質問を正しく理解したので、私は自分の答えを更新しました。
W3C Specは、value属性に色を表す文字列があると定義していますが、既定の色は定義していません。だから私は、デフォルトの色の実装は、ブラウザの裁量で残っていると思う。
しかし、WhatWG Specは、このノートであなたの質問を、anwers
はまた、あなたの期待に基づいて、CSS言語は注：入力タイプ要素は色の状態にあるとき、色が選んだ常にある、と設定する方法はありません値を空の文字列に設定します。
input type='color'がデフォルト値として
NULLを有することを不可能にする任意の要素、のため
NULL属性を定義したことはありません。
回避策：
回避策はシャドウDOMのAPIに存在しています。 Chromeデベロッパーツールを使用して
、私たちは擬似要素::-webkit-color-swatch backgroundプロパティにtransparent色を与えることが判明 - 上記のCSSのために
input[type=color]::-webkit-color-swatch
{
background-color: transparent !important;
}
を、あなたのHTMLはこれを好きなはずです - <input type="color"> 。これで、ユーザーがデフォルトの色を変更したかどうかを知るためのリスナーは必要ありません。 transparentの色は、値が変更されたかどうかを判断できるNULLカラーとして扱うことができます。
Firefox用のShadow DOMからバックグラウンドに対して透過的な値を設定するための同様の種類の情報が見つかるはずです。 IEはまだ私たちの痛みです。
色を選択しても常に透明です –
value属性に16進数表記を使用しているうちに、私が気づいたのは6桁でなければならないということです。白色の場合は#fffを使用しても機能しません。それは#ffffffでなければなりません。
javascriptで設定するときも同じことが起こります。 document.querySelector('input[type="color"]').value = '#fff'は機能しません。色は黒のままです。 これを使用するには、document.querySelector('input[type="color"]').value = '#ffffff'を使用する必要があります。
何か慎重にしてください。
[W3C Spec]（http://www.w3.org/TR/html-markup/input.color.html）が 'value'属性を定義しているためです'＃'で始まり、その後に6つの16進文字が続きます。 「赤」、「青」などのインファクトカラーキーワードも許可されていません。 –
これは私が探していた答えです –
この問題がchromeでのみ利用可能かどうかわかりませんが、chromeのクイックフィックスが見つかりました。我々は、それは誰か:)
はfirefoxのために働かなかった –
ここでは私のソリューションです助けを願って最初#FFFFFFに入力値を設定し、その後にデフォルト値にそれを設定する必要があり、デフォルトの色が表示されます代わりに
var element = document.querySelector('input[type="color"]');
element.value = '#FFFFFF'; //remember the hex value must has 7 characters
element.value = element.defaultValue;
$(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>エルフ。それは良い "透明"ボタンを表示します。クリックすると、通常の非表示の入力色が表示されます。色がピックアップされると、透明ボタンが非表示になり、入力色が表示されます。
乾杯。
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="" />
私は本当にあなたの質問を理解していません。あなたはデフォルトの入力色として何をしたいですか？ –
@PankajParashar ''を持ち、値を持たないときと同じです。 HTML5は、 ''に黒のデフォルトの色を強制します。これはNULL値を持つ必要があります。つまり、色は選択されません。 –
あなたの質問を今すぐご理解ください。私はそれに応じて私の答えを更新します。 –