Test focus

by devangkantharia

HTML

<div id="content">
    <div class="form-group">
  <label for="usr">Name:</label>
  <input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
</div>
</div>
        
        
        
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <div class="page-header" style="text-align:center;">
                    <h2>
                        <img src="../Content/images/logo.png" style="width:40%;">
                    </h2>
                </div>


                <form id="registrationForm" method="post" class="form-horizontal" action="...">
                    <div class="preData col-lg-6">
                        <!--Employee Id-->
                        <div class="form-group" id="EmployeeIDDiv">
                            <div class="">
                                <input type="number" class="" name="empid" id="empId" placeholder="">
                                <span class="bar"></span>
                                <label class="">Register with Employee Id</label>
                                <small id="empIdError" class="help-block">The username is required and cannot be empty</small>
                            </div>
                        </div>
                        <div class="labelOr">
                            OR
                        </div>
                        <!--Email address-->
                        <div class="form-group" id="EmailDiv">
                            <div class="">
                                <input type="email" class="" name="email" id="emailId" placeholder="">
                                <span class="bar"></span>
                                <label class="">Register with Email address</label>
                                <small id="emailIdError" class="help-block">The username is required and cannot be...

CSS

.focused {
    background: #abcdef;
}

JavaScript

$("#content").delegate("input", "focus blur", function () {
    var elem = $(this);
    setTimeout(function () {
        elem.toggleClass("focused", elem.is(":focus"));
    }, 0);
});