Цвет цвета по умолчанию для HTML5

Ответ 1

При использовании hexcode для атрибута value в <input type="color">, я заметил, что это должно быть шесть цифр, если для белого вы используете #fff, он не работает. Это должно быть #ffffff.

То же самое происходит при настройке через javascript. document.querySelector('input[type="color"]').value = '#fff' не работает. Цвет остается черным. Вы должны использовать document.querySelector('input[type="color"]').value = '#ffffff', чтобы он работал.

Что-то нужно быть осторожным.

Ответ 2

Использовать значение:

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

Если вы хотите знать, остаются ли данные без изменений, вы можете сделать что-то вроде этого (с помощью jQuery):

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

http://jsfiddle.net/j3hZB/

Ответ 3

Изменить: Теперь, когда я правильно понял ваш вопрос, я обновил свой ответ.

Хотя W3C Spec определяет, что атрибут value имеет строку, представляющую цвет, он не определяет цвет по умолчанию. Поэтому я считаю, что реализация цвета по умолчанию остается на усмотрение браузера.

Однако WhatWG Spec отвечает на ваш вопрос с этой записью,

Примечание.. Когда элемент типа ввода находится в состоянии цвета, всегда есть выбранный цвет, и нет способа установить значение в пустую строку.

Кроме того, на основе вашего ожидания язык CSS никогда не определял атрибут NULL для любого элемента, что делает невозможным для input type='color' иметь NULL как значение по умолчанию.

Обход проблемы:

Обходной путь присутствует в API-интерфейсе Shadow DOM.

Используя инструменты разработчика Chrome, я обнаружил, что мы можем дать цвет transparent для свойства фона псевдо-элемента ::-webkit-color-swatch -

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

Для вышеприведенного CSS ваш HTML должен выглядеть так: <input type="color">. Теперь вам не нужно, чтобы какой-либо слушатель узнал, изменил ли пользователь по умолчанию цвет или нет. Вы можете просто обработать цвет transparent как цвет NULL, на основе которого вы можете принять решение о том, было ли изменено значение или нет!

Я уверен, что вы найдете подобную информацию из Shadow DOM для Firefox, чтобы установить прозрачное значение для фона. IE по-прежнему остается для нас болью.

Ответ 4

Не знаю, доступна ли эта проблема только на хроме, но я нашел быстрое исправление для хром. Нам нужно сначала установить входное значение в #FFFFFF, а после этого установить его значение по умолчанию, вместо черного будет отображаться цвет по умолчанию

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

Надеюсь, что это поможет кому-то:)

Ответ 5

Вот мое решение, переключая тип ввода из текста в цвет:

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

Ответ 6

Я реализовал такое решение для себя. Он отображает приятную "прозрачную" кнопку. При щелчке запускается обычный скрытый цвет ввода. Когда цвет подобран, прозрачная кнопка будет скрыта, а цвет ввода будет отображаться.

Приветствия.

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="" />

Ответ 7

Ответ может быть двояким.

1. В целях отображения, да, вы можете установить цвет по умолчанию, просто установив в качестве значения ввода нужный вам цвет. Вы можете увидеть варианты этого в ответах на этой странице.
2. Технически нет. Невозможно отправить пустое значение как цвет через POST. Значение POSTed всегда будет по умолчанию равно #000000 или цвету, который вы установили по умолчанию (как упомянуто в 1.).

#010101 об этом, возможно, практическим решением для этого может быть выбор #010101 в качестве ссылки на null false или что-то еще. Это оставляет место для некоторого jQuery (или javascript), чтобы уменьшить вероятность того, что это значение может быть установлено.

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

Например, с одной стороны, цветным входам, для которых установлено required может быть присвоено значение #010101 при load события. И, конечно же, запретите пользователям выбирать цвет # 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, который также имеет необязательное значение по умолчанию, этот тип ввода цвета очень отличается.