jquery 颜色适用于文本而不是 div

Question

我正在尝试使用 jQuery 制作一个简单的颜色选择器:
JS:

$(function(){
 $("#color-input").keyup(function(){
  var colorCode = $(this).html();
  $(this).css('color', colorCode);
 });
});

HTML:

<input type="text" name="color-input" id="color-input">

它应该读取文本框的输入，并使文本成为输入的颜色。这行得通，但是当我尝试这样做时:

<input type="text" name="color-input" id="color-input">
<div id="color-box" style="height:250px; width:250px;"></div>

JS:

$(function(){
      $("#color-input").keyup(function(){
         var colorCode = $(this).html();
         $(this).css('color', colorCode);
         $("#color-box").css('background', colorCode);
      });
    });

它仅适用于某些颜色，例如 #FF00FF 或 rgb(0,255,0)。对于像这样的代码:#7f154，文本会改变颜色，而不是 div。无论代码如何，我怎样才能使两者都匹配输入的颜色？ LIVE PAGE

Answer 1

您需要更改“背景颜色”属性，而不是“背景”:

$(function(){
      $("#color-input").keyup(function(){
         var colorCode = $(this).val();
         $(this).css('color', colorCode);
         $(this).css('background', 'none');
         $("#readout").css('background-color', colorCode); //changed to background-color
         $("#readout-t").val(colorCode);
      });
    });

此外，如果用户输入值，您应该检查它是否以“#”开头:

$(function(){
      $("#color-input").keyup(function(){
         var colorCode = $(this).val();
         $(this).css('color', colorCode);
         $(this).css('background', 'none');
         //check if valid color
         if (colorCode.charAt(0) != '#') {
              colorCode = '#' + colorCode;
         }
         $("#readout").css('background-color', colorCode);
         $("#readout-t").val(colorCode);
      });
    });