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

您可以监听两个元素的输入更改。

由于color输入只接受7个字符的十六进制字符串，因此您需要转换4位数的速记十六进制字符串才能使它们正常工作。

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})$/)) {
  	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

你几乎做对了。您要查找的是color属性，而不是尝试设置元素的value属性。

此外，为了让Javascript按照您的意图运行，您应该为他们添加正确的事件调用 - 文本框为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()" />

如何使用文本框设置和获取颜色

2 个答案: