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。我如何使两者匹配输入的颜色，无论代码?生活页面

Answer 1

你需要改变'background-color'属性，而不是'background':

$(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);
      });
    });

Answer 2

你的jquery出错了。您已经使用了$(this).html()，但应该是$(this).val()。

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