CODEWITHSUNDEEP
javascriptjquery
Unknown Error
Unknown Error

Reputation: 797

jQuery an alternative to .keyup function

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.net/5dsXT/

Upvotes: 1

Views: 5545

Answers (2)

Richard Marskell - Drackir
Richard Marskell - Drackir

Reputation: 13302

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.

Upvotes: 4

hunter
hunter

Reputation: 63512

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.net/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.net/5dsXT/1/

Upvotes: 3

Related Questions