Change color when editing input value

Question

I'm trying to change backgroundColor based on a input value, however it does not seem to work, when i change the color from the colorpicker even though i can see the input value change?

http://jsfiddle.net/AHZBT/4/

Java Code

$(function() { var bgColor = $('#colorpickerField1').val(); $('body').css("backgroundColor",'#' + bgColor); $('#colorpickerField1').keyup(function() { $('body').css("backgroundColor",'#' + $(this).val()); }); });

You are listening to keyup, so the backgound color is going to change only if you type something. — FirstOne
– FirstOne, Commented Oct 6, 2015 at 17:36

Aleksei Golubev · Accepted Answer · 2015-10-06 17:36:31Z

4

Use change event:

 $('#colorpickerField1').change(function() { $('body').css("backgroundColor",'#' + $(this).val()); });

answered Oct 6, 2015 at 17:36

Aleksei Golubev

3523 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Samuel Cook · Accepted Answer · 2015-10-06 17:47:21Z

If you're looking to change the background in real-time, I pulled this from the documenation:

<input class="color {onImmediateChange:'updateInfo(this);'}" id="colorpickerField1" value="66ff00"> function updateInfo(color) { $('body').css("backgroundColor",'#' + color); }

http://jscolor.com/try.php#onimmediatechange

wdoering · Accepted Answer · 2015-10-06 17:44:21Z

Worked ok with blur:

$(function() { var bgColor = $('#colorpickerField1').val(); $('body').css("backgroundColor",'#' + bgColor); $('#colorpickerField1').blur(function() { $('body').css("backgroundColor",'#' + $(this).val()); }); });

Collectives™ on Stack Overflow

Change color when editing input value

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related