JQuery Focus Event

JQuery Focus Event

by ian_smithz

HTML

Focus     : <input id="txtInput1" type="text" /> <br /><br />
Focus In  : <input id="txtInput2" type="text" /> <br /><br />
Focus Out : <input id="txtInput3" type="text" /> <br /><br />

JavaScript

$(document).ready(function () {

        $("#txtInput1").focus(
             function (event) {
                 $("#txtInput1").css("background-color", "Green");
             }
         );
 
        $("#txtInput2").focusin(
             function (event) {
                 $("#txtInput2").css("background-color", "Yellow");
             }
         );
    
     $("#txtInput3").focusout(
             function (event) {
                 $("#txtInput3").css("background-color", "Red");
             }
         );
});