Clearing Input Value on Focus Using jQuery

In this tutorial we will learn Clearing Input Value on Focus Using jQuery. Here we are using jQuery to accomplish this.
Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Clearing Input Value on Focus Using jQuery</title>
<style type="text/css">
body {
width: 980px;
margin: 0px auto;
text-align: center;
padding-top: 50px;
font-size: 20px;
}
    .lightcolor[type="text"] {
        color: #ccc;
    }
</style>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //assigning css style for light color
        $('.lebelinput').addClass('lightcolor');
        // clearing input on focus
        $('.lebelinput').live('focus', function () {
            if ($(this).val() == $(this).attr('title')) {
                $(this).val('').removeClass('lightcolor');
            }
        });
        //restoring input value on blrr if the input is left blank
        $('.lebelinput').live('blur', function () {
            if ($(this).val() == '') {
                var inputtitle = $(this).attr('title');
                $(this).val(inputtitle).addClass('lightcolor');
            }
        });
    });
</script>
</head>
<body>
<div>
<h2>Clearing Input Value on Focus Using jQuery</h2>
<input type="text" value="First Name" name="firstname" onfocus="this.value = ''">
<input type="text" value="Last Name" name="lastname" onfocus="this.value = ''">
<br /><br />
<br /><br />
All rights reserved by <a href="http://www.hightechnology.in">www.Hightechnology.in</a> |
Hosting partner <a href="http://www.grootstech.com" target="_blank">Grootstech</a>
</div>
</body>
</html>