Wednesday, 21 September 2011

How to change color on focus of input box using jquery?

Hi Dear,

<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.focused {
    background: #abcdef;
}
</style>
<form name="focusForm" id="focusForm" method="POST" >
<table width="100%" cellspacing="2" cellpadding="2" >
    <tr>
        <td width="180">First Name: </td>
        <td><input type="text" name="txtFName" value="" /></td>
    </tr>
    <tr>
        <td>Last Name: </td>
        <td><input type="text" name="txtLName" value="" /></td>
    </tr>
    <tr>
        <td>Age: </td>
        <td><input type="text" name="txtAge" value="" /></td>
    </tr>
    <tr>
        <td>Occupation: </td>
        <td><input type="text" name="txtOccupation" value="" /></td>
    </tr>
    <tr>
        <td>Secret Question: </td>
        <td><input type="text" name="txtQuestion" value="" /></td>
    </tr>
    <tr>
        <td>Answer: </td>
        <td><input type="text" name="txtAnswer" value="" /></td>
    </tr>
</table>
</form>
<script>
//$("#focusForm input:first").focus();
//$("#focusForm :input").attr('disabled','disabled');
$("#focusForm :input").live("focus blur", function(e) {
    var el = $(this);
    el.toggleClass("focused", el.is(":focus"));
});
</script>

Cheers!

1 comment: