Question

我有一个输入文本字段。当我在没有＃的情况下输入十六进制值时，它的背景颜色会变为新颜色，我正在打字。并且文本颜色应该是白色或黑色取决于新的背景颜色亮度。在完成打字后点击输入后我可以这样做。我怎么能动态地做到这一点，我的意思是whitout击中进入？我的代码：

$(document).on("focus", "input[name='colorCode']", function (){
  $(this).keyup(function (options) {
    var myBgColor = "#" + $(this).val();
    $(this).css("background-color", myBgColor);
    var bgColor = $(this).css("background-color");
    var settings = $.extend({
                      darkText: "#000",
                      lightText: "#fff"
                     }, options);
    var rgb = bgColor.substring(bgColor.indexOf('(') + 1, bgColor.lastIndexOf(')')).split(/,\s*/),
        red = rgb[0],
        green = rgb[1],
        blue = rgb[2],
        brightness = Math.sqrt((.241 * (red * red)) + (.671 * (green * green)) + (.068 * (blue * blue)));
    if (brightness > 128) {
        $(this).css('color', settings.darkText);
    } else {
            $(this).css('color', settings.lightText);
        }
  });
})

请提出任何建议......

编辑：输入前3个字符后，我不必点击输入，按任意键可更改文字颜色。

Answer 1

如果您教导如果不按回车键自动更改输入框的颜色，则代码很好。

将其加载到index.html并启动浏览器：

这是index.html：

<html>
  <head>
    <title>Color change</title>
    <meta content="">
    <style></style>
  </head>
  <body class="background-color">
  <input name="colorCode"/>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="load.js" type="text/javascript"></script>
</html>

这是load.js档案：

$( document ).ready(function() {
  $(document).on("focus", "input[name='colorCode']", function (){
  $(this).keyup(function (options) {
    var myBgColor = "#" + $(this).val();
    $(this).css("background-color", myBgColor);
    var bgColor = $(this).css("background-color");
    var settings = $.extend({
                      darkText: "#000",
                      lightText: "#fff"
                     }, options);
    var rgb = bgColor.substring(bgColor.indexOf('(') + 1, bgColor.lastIndexOf(')')).split(/,\s*/),
        red = rgb[0],
        green = rgb[1],
        blue = rgb[2],
        brightness = Math.sqrt((.241 * (red * red)) + (.671 * (green * green)) + (.068 * (blue * blue)));
    if (brightness > 128) {
        $(this).css('color', settings.darkText);
    } else {
            $(this).css('color', settings.lightText);
        }
  });
})
});

将它放在同一目录中的localhost上。

Check on fiddle

如何动态检查背景颜色更改

1 个答案: