I want to know alternative for .keyup function. Example

$(".color").keyup(function () {
    var top_header = $("#top_header").val();
    $("#top").css("background-color", top_header);
});

<input value="#121212" class="color" id="top_header" type="text" />

This code will change id='top' with a new background when we type to the input text.

Now I change it to jscolor to the field. So when we click to the text input will shown color generator.

Question

What should I replace .keyup(function () to make make color change instantly without to have enter?

Example without using jscolor /

I want to know alternative for .keyup function. Example

$(".color").keyup(function () {
    var top_header = $("#top_header").val();
    $("#top").css("background-color", top_header);
});

<input value="#121212" class="color" id="top_header" type="text" />

This code will change id='top' with a new background when we type to the input text.

Now I change it to jscolor to the field. So when we click to the text input will shown color generator.

Question

What should I replace .keyup(function () to make make color change instantly without to have enter?

Example without using jscolor http://jsfiddle/5dsXT/

• javascript
• jquery

• Color already changes intantly in the jscolor website doesnt it? jscolor. – amosrivera Commented Mar 2, 2011 at 16:12
• When I look at jscolor it seems to change colour as you type just as your jsfiddle example does. Could you clarify what you are trying to do a bit more? Perhaps an example of what isn't working might help... – Chris Commented Mar 2, 2011 at 16:14
• yes.. actually on div id='top' – Unknown Error Commented Mar 2, 2011 at 16:15

2 Answers 2

You're looking for the onChange event try replacing the .keyup() function with .change().

Example

$(document).ready(function () {
    $(".color").change(function () {
        var top_header = $("#top_header").val();
        $("#top").css("background-color", top_header);
    });
});

<input value="#121212" class="color" id="top_header" type="text" />

Edit You can see an example of them using the event on their "tweaking" page.

I'm not exactly sure what you're asking, but if you want to bind two events to that texbox you can try this:

$(document).ready(function () {
    $("#top_header").bind("keyup focus", function() {
        $("#top").css("background-color", $(this).val());
    });
});

http://jsfiddle/5dsXT/2/

If you want to handle initial page load, focus, and keyup you can do this:

$(document).ready(function () {
    SetColor();
    $("#top_header").bind("keyup focus", SetColor);        
    function SetColor()
    {
        $("#top").css("background-color", $("#top_header").val());
    }
});

http://jsfiddle/5dsXT/1/