JQuery Forms Focus Out

From CoderLearner
Jump to: navigation, search

Description

Fired the JavaScript "focusout" event.

Syntax

$.focusout( handler(eventObject) )

$.focusout( [eventData], handler(eventObject) )

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>
        <script>
            $(document).ready(function() {
                var cc=0;
                var ff=0;
                $('p').focusout(function(){
                    ff++;
                    $('#ff').text("Focused :"+ff +'times');
                }).blur(function(){
                    cc++;
                    $('#cc').text("Blur: "+cc+'times') ;
                });
            });
        </script>
    </head>
    <body> 
        <form>
            <p><input type="text" name="first" id="first"/></p>     
            <p><input type="text" name="second" id="second"/></p>
            <div id="cc"></div>
            <div id="ff"></div>
        </form>
    </body>
</html>

Try It

Example 2

<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>
            .hide {
                display: none;
            }
         
        </style>
        <script>
            $(document).ready(function() {

                $('input').focus(function(){
                    var text = "This is " +$(this).val();
                    $("#tip").text(text);
                    $('#tip').css("display","inline");
                }).focusout(function(){
                    $('#tip').hide();
                });
            });
        </script>
    </head>
    <body> 
        <form>
            <p><input type="text" name="first" id="first"/></p>     
            <p><input type="text" name="second" id="second"/></p>
            <div id="tip" class="hide"></div>
        </form>
    </body>
</html>

Try It