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

您需要更改背景颜色＆＃39;财产，而不是＆＃39;背景＆＃39;：

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

此外，如果用户有价值，您应该检查是否以＃＆＃39;开始：

;

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

jquery颜色适用于文本而非div

2 个答案: