web-dev-qa-db-ja.com

HTML5入力色のデフォルト色

input type="color"のデフォルトの色は黒です：#000000。

空の値を指定しても...

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

...デフォルトの色は常に黒です。

ユーザーに色を選択するオプションを提供したいのですが、そうでない場合は、色が選択されていないことを意味し、白#FFFFFFでさえも選択されていません。

input type="color"をデフォルトとして黒色にしないように強制する方法はありますか？

何らかの種類の「リスナー」を使用して、ユーザーが初めて色を変更したかどうかを確認できます。変更していない場合は、値を無視しますが、Javascriptは避けたいと思います。

html5inputcolors
40
Ali Bassam

_<input type="color">_のvalue属性に16進コードを使用しているときに気づいたのは、6桁でなければならないことです。白の場合は_#fff_を使用すると動作しません。 _#ffffff_でなければなりません。

Javascriptを使用して設定する場合も同じことが起こります。 document.querySelector('input[type="color"]').value = '#fff'は機能しません。色は黒のままです。 document.querySelector('input[type="color"]').value = '#ffffff'を使用して動作させる必要があります。

気をつけるべきこと。

17
subham.saha1004

値を使用：

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

入力が変更されていないかどうかを知りたい場合は、次のようなことができます（jQueryを使用）：

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

http://jsfiddle.net/j3hZB/

6
ogur

Edit：さて、あなたの質問を正しく理解したので、答えを更新しました。

W3C Spec は、value属性に色を表す文字列があることを定義していますが、デフォルトの色は定義していません。したがって、デフォルトの色の実装はブラウザの裁量に任されていると思います。

ただし、 WhatWG Spec は、このメモで質問に答えます。

注：入力タイプ要素がカラー状態の場合、常に選択されたカラーがあり、値を空に設定する方法はありません文字列。

さらに、期待に基づいて、CSS言語はどの要素にもNULL属性を定義しなかったため、input type='color'がNULLをデフォルト値として持つことはできません。

回避策：

回避策はShadow DOM APIにあります。

enter image description here

Chrome Developer Toolsを使用して、疑似要素::-webkit-color-swatch backgroundプロパティにtransparent色を付けることができることがわかりました-

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

上記のCSSの場合、HTMLは<input type="color">を好むはずです。これで、ユーザーがデフォルトの色を変更したかどうかを知るためのリスナーを用意する必要がなくなりました。 transparent色をNULL色として扱うだけで、それに基づいて値が変更されたかどうかを判断できます。

FirefoxのShadow DOMから同様の種類の情報を見つけて、バックグラウンドに透明な値を設定すると確信しています。 IEはまだ私たちにとって苦痛のままです。

4
Pankaj Parashar

この問題が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;

それが誰かを助けることを願っています:)

1
Vu Nguyen

入力タイプをテキストから色に切り替える私のソリューションは次のとおりです。

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

答えは2つあります。

  1. はい、表示の目的で、入力の値を希望の色に設定するだけで、デフォルトの色を設定できます。このページの回答で、この種類を確認できます。
  2. 技術的にはありません。空の値をPOSTで色として送信することはできません。 POSTされた値は常に#000000またはデフォルトに設定した色（1で述べたように）になります。

これについていくらか考えた後、おそらくこれに対する実用的な解決策は、nullまたはfalseまたはその他への参照として#010101を選択することです。これにより、この値を設定できる可能性を低くするために、jQuery（またはjavascript）の余地が残ります。

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

たとえば、一方でrequiredに設定されたカラー入力には、イベント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入力タイプを除き、このカラー入力タイプは非常に異なります。

0
JPA

私は自分でこの種のソリューションを実装しました。素敵な「透明」ボタンが表示されます。クリックすると、通常の非表示の入力色がトリガーされます。色を選択すると、透明ボタンが非表示になり、入力色が表示されます。

乾杯。

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="" />
0
Programming Caveman