Как проверить динамические изменения цвета фона

У меня есть текстовое поле ввода. Когда я нажимаю для ввода шестнадцатеричного значения без #, его цвет фона меняется на новый цвет, я печатаю. И цвет текста должен быть белым или черным от новой яркости цвета фона. Я могу это сделать, когда я нажимаю кнопку ввода после завершения ввода. Как я могу сделать это динамически, я имею в виду, что вы не входите в игру? Мои коды:Как проверить динамические изменения цвета фона

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

Любые предложения, пожалуйста ...

EDIT: не должен нажать кнопку ввода, после ввода первого символа 3, нажатие любой клавиши изменяет цвет текста.

источник

2015-07-25 Bulent

Какая часть вашего кода не изменяется динамически? –

Если вы научили изменять цвет окна ввода автоматически, не нажимая enter, ваш код хорош.

Загрузите это в 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); 
     } 
    }); 
}) 
});

Поместите на локальном хосте в той же директории.

Check on fiddle

источник

2015-07-25 15:11:54

Спасибо, Владимир, я не пробовал. Но есть ли способ сделать это, если я хочу поместить этот код в файл сценария и связать его перед тем, как разыгрывать тег тела? Поскольку у меня есть некоторые подобные проблемы, и если я смогу найти решение таким образом, это будет лучше. – Bulent

Уверенный обновленный ответ выше ... Пожалуйста, проверьте –

Да, это сработало. Спасибо за ваши усилия. – Bulent

Как проверить динамические изменения цвета фона

ответ

Смежные вопросы