텍스트 상자를 사용하여 색상을 설정하고 가져 오는 방법

Question

텍스트 상자와 type=color이 있습니다. 색상 컨트롤을 사용하여 색상을 변경하면 텍스트 상자에 값을 설정해야하며 색상 텍스트 상자의 값을 변경할 때 색상 컨트롤이 변경되어야합니다.

풀 컬러 코드를 입력 한 즉시 반영하려면 어떻게해야합니까?

이걸로 시도 :

function changeColor() { 
 
    var color = document.getElementById("coltext").value.trim(), 
 
    rxValidHex = /^#(?:[0-9a-f]{3}){1,2}$/i; 
 

 
    if (rxValidHex.test(color)) { 
 
    document.getElementById("color").style.color = color; 
 
    } else { 
 
    alert("Invalid CSS Hex Color"); 
 
    } 
 
}

<input type=text id="coltext" /> 
 
<input type=color id="color" />

Answer 1

당신은 두 요소에 입력 변경을들을 수 있습니다.

입력은 7 문자 16 진수 문자열 만 허용하므로 올바르게 작동하려면 4 자리의 약식 16 진수 문자열을 변환해야합니다.

---

편집

var coltext = document.getElementById('coltext'); 
 
var colpick = document.getElementById('color'); 
 

 
// Listen to changes in the colortext input 
 
coltext.addEventListener("input", function(e){ 
 
    // If the input is a valid 7 character hex string 
 
    // assign this value to the color picker 
 
    if(this.value.match(/^#([0-9a-f]{6})$/)) { 
 
    \t colpick.value = this.value; 
 
    } 
 
    // If the input is a valid 4 character hex string 
 
    // convert it to a 7 character hex string and 
 
    // assign this value to the color picker 
 
    else if(this.value.match(/^#([0-9a-f]{3})$/)) { 
 
    var r = this.value[1], 
 
     g = this.value[2], 
 
     b = this.value[3]; 
 
    colpick.value = `#${r}${r}${g}${g}${b}${b}`; 
 
    } 
 
}) 
 

 
// If a new color is picked, display its value 
 
// in the text input field 
 
colpick.addEventListener("input", function(e){ 
 
    coltext.value = this.value; 
 
})

<input type=text id="coltext" /> 
 
<input type=color id="color" />

: - 대신 여섯 개 별도의 표현의 내 원래의 대답과 같이 그것은 문자열을 연결하고 하나의 템플릿 리터럴 표현식을 사용하여 결과를 인쇄 할 수 아마 더 빠릅니다. 두 가지 모두 작동하는 동안 다음 라인은 아마도 위의 해결책보다 더 우아하고 약간 성능이 뛰어납니다.

colpick.value = `#${r+r+g+g+b+b}`; 

Answer 2

window.addEventListener("load", startup, false); 
 

 
function startup() { 
 
  colorWell = document.querySelector("#color"); 
 
  document.querySelector("#coltext").value = colorWell.value; 
 
  colorWell.addEventListener("input", updateInput, false); 
 
  colorWell.addEventListener("change", updateInput, false); 
 
    colorInput = document.querySelector("#coltext"); 
 
  colorInput.addEventListener("input", updateColorInput, false); 
 
  colorInput.addEventListener("change", updateColorInput, false); 
 
} 
 

 
function updateInput(event) { 
 
document.querySelector("#coltext").value = event.target.value; 
 
} 
 

 
function updateColorInput(event){ 
 
document.querySelector("#color").value = event.target.value; 
 
}

<input type=text id="coltext" /> 
 
<input type=color id="color" />

당신은 얻을 값을 설정할 경우에서의 EventListener input 및 change를 추가 할 수 있습니다.

Answer 3

거의 맞았습니다. 요소의 color 속성을 설정하는 대신 value 속성을 찾고 있습니다.

자바 스크립트를 의도 한대로 작동 시키려면 텍스트 상자에 onBlur, 색상 컨트롤에 onChange이라는 적절한 이벤트에 대한 호출을 추가해야합니다.

아래 코드에서 변경 한 사항을 확인하십시오.

function changeColor() { 
 
    var color = document.getElementById("coltext").value.trim(), 
 
    rxValidHex = /^#(?:[0-9a-f]{3}){1,2}$/i; 
 

 
    if (rxValidHex.test(color)) { 
 
    document.getElementById("color").value = color; 
 
    } else { 
 
    alert("Invalid CSS Hex Color"); 
 
    document.getElementById("coltext").value = ""; 
 
    } 
 
} 
 

 
function selectNewColor(){ 
 
document.getElementById("coltext").value = document.getElementById("color").value; 
 
} // end of function selectNewColor

<input type=text id="coltext" onBlur="changeColor()"/> 
 
<input type=color id="color" onChange="selectNewColor()" />