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에 존재한다.
크롬 개발자 도구를 사용하여, 나는 우리가 의사 요소에 ::-webkit-color-swatch 배경 속성 transparent 색상을 줄 수 있다는 것을 발견 - 위의 CSS를 들어
input[type=color]::-webkit-color-swatch
{
background-color: transparent !important;
}
를, 당신의 HTML이를 좋아한다 - <input type="color">을 .이제 사용자가 기본 색상을 변경했는지 여부를 알기 위해 어떤 유형의 리스너도 가질 필요가 없습니다. transparent 색상을 NULL 값으로 처리하면 값이 변경되었는지 여부를 결정할 수 있습니다.
배경에 투명한 값을 설정하기 위해 Firefox 용 그림자 DOM에서 비슷한 종류의 정보를 찾을 수있을 것입니다. IE는 여전히 우리에게 고통을주고 있습니다.
[W3C Spec] (http://www.w3.org/TR/html-markup/input.color.html)이 'value' 속성을 정의했기 때문에 색상을 선택한 후에도 항상 투명합니다. –
value의 16 진수 코드를 <input type="color">에 사용하는 동안 한 가지 사실은 6 자리 여야한다는 것입니다. 흰색 인 경우 #fff을 사용하면 작동하지 않습니다. #ffffff이어야합니다.
자바 스크립트로 설정할 때도 마찬가지입니다. document.querySelector('input[type="color"]').value = '#fff'이 작동하지 않습니다. 색상은 검은 색으로 유지됩니다. 작동하려면 document.querySelector('input[type="color"]').value = '#ffffff'을 사용해야합니다.
주의해야 할 사항.
예 '# '로 시작하고 그 다음에 6 개의 16 진수가 오는 정확히 7자를 포함해야합니다. '빨강', '파랑'과 같은 사실적인 색상 키워드는 허용되지 않습니다. –
이것은 내가 찾던 대답이다. –
이 문제는 Chrome에서만 사용할 수 있는지 모르겠지만 크롬에 대한 빠른 수정을 찾았습니다. 우리는 첫번째 #FFFFFF하는 입력 값을 설정해야하고이 값을 기본값으로 설정 한 후, 기본 색상이 대신 표시됩니다
var element = document.querySelector('input[type="color"]');
element.value = '#FFFFFF'; //remember the hex value must has 7 characters
element.value = element.defaultValue;
는 firefox에서 작동하지 않았다. –
를 :) 도움을 희망, 텍스트의 색 전환 입력 유형 : I가 MYS위한 용액이 종류를 구현
$(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''이 있고 값이없는 경우와 마찬가지로 NULL입니다. HTML5는''이 검정색 인 기본 색상을 갖도록 강요합니다. 즉, NULL 값이 필요합니다. 즉, 색상이 선택되지 않습니다. –
지금 귀하의 질문을 이해합니다. 그에 따라 내 대답을 업데이트 할 것입니다. –