Previous chapter (Jquery Tutorial - Manipulation)Next chapter (Jquery Tutorial - Effects)

jQuery Focus & Change Event

jQuery events can be used to register behaviors to take effect when the user interacts with the browser, and to further manipulate those registered behaviors.

Other examples in Events (Jquery Tutorial)

Result from the Online TryIt-Editor

<!doctype html>
<html>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
</script>
<script type="text/javascript" type="text/javascript">
    $(document).ready(function () {

$("input").focus(function () {
            $("input").css("background-color", "#FFFFCC");
        });
        $("input").blur(function () {
            $("input").css("background-color", "#D6D6FF");
        });

$(".field").change(function () {
            $(this).css("background-color", "#D6D6FF");
        });
    });
</script>
<body>
    <h4>
        it will change background color when focus or you leave focus the text field.
    </h4>
    Enter your name:
    <input type="text" />
    <h4>
        When a item is selected, it will change background color and this is jQuery change
        event.
    </h4>
    Car:
    <select class="field">
        <option value="volvo">Volvo </option>
        <option value="saab">Saab </option>
        <option value="fiat">Fiat </option>
        <option value="audi">Audi </option>
    </select>
</body>
</html>

^1.0

^1.0

^1.0

^3.0

^4.0

jQuery Focus & Change Event

Useful Information