JQuery Forms Focus In

From CoderLearner
Jump to: navigation, search

Description

Bind an event handler to the JavaScript "focusin" event. This event is distinct from the focus event and it can detecting on the parent elements.

Syntax

$.focusin( handler(event object) )

$.focusin( [event data], handler(event object) )

Example 1

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Focus</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <style>
            span {
                display:none;
            }
        </style>
        <script>
            $(document).ready(function() {
                $("p").focusin(function() {
                    $(this).find("span").css('display','inline').fadeOut(1000);
                });
            });
        </script>
    </head>
    <body> 
        <form>
            <p><input type="text" name="first" id="first"/><span>First Name</span></p>     
            <p><input type="text" name="second" id="second"/><span>Second Name</span></p>
        </form>
    </body>
</html>

Try It

Example 2

Focus in and Focus out.

$("#your-field").focusin(function() {
    $('#your-field').addClass("active");
});
$("#your-field").focusout(function() {
    $('#your-field').removeClass("active");
});

Try It