使用jQuery在焦点和模糊上设置<input />特征

Question

$("#username").focus(function()
                     {
                       if ($(this).val() == "username")
                       {
                         $(this).attr("value", "") ;
                         $(this).css("color", "#000000") ;
                       }
                     }) ;
$("#username").blur(function()
                    {
                      if ($(this).val() == "")
                      {
                        $(this).attr("value", "username") ;
                        $(this).css("color", "#CDCDCD") ;
                      }
                    }) ;

<form>
  <table style="background: #90EE90 ; border: 2px solid #00FF00 ; border-radius: 5px">
    <tr>
      <td>Username:</td>
      <td>
        <input id="username" name="u" style="color: #CDCDCD" type="text" value="username" />
      </td>
      <td>Password:</td>
      <td>
        <input id="password" name="p" style="color: #CDCDCD" type="password" value="password" />
      </td>
      <td>
        <input type="submit" value="Login" />
      </td>
    </tr>
  </table>
</form>

您好，
我正在使用上面的内容来了解​​jQuery的奇特功能：

我希望模拟的功能如下：

用户名输入默认包含文本“username”，文本颜色为浅灰色

关注此输入时，应将输入消隐，文本颜色应更改为黑色 在从此输入进行散焦时，文本应恢复为“用户名”，文本颜色应恢复为浅灰色如果用户提供的值为空白

使用上面的jQuery代码，我得到以下功能：

1. 页面加载 - ＆gt;用户名输入的值为“用户名”和文本颜色 是浅灰色文字 - ＆gt;预期
2. 关注用户名输入 - ＆gt;输入被清除 - ＆gt;预期
3. 用户名输入散焦 - ＆gt;值恢复为“用户名”，文本颜色为浅灰色 - ＆gt;预期
4. 关注用户名输入 - ＆gt;输入被清除 - ＆gt;预期
5. 键入的用户名 - ＆gt;文字颜色是黑色 - ＆gt;预期
6. 用户名输入散焦 - ＆gt;值保持为键入，文本颜色为黑色 - ＆gt;预期
7. 关注用户名输入 - ＆gt;值保持为键入，文本颜色为黑色 - ＆gt;预期
8. 删除用户名并输入散焦 - ＆gt;输入保持空白 - ＆gt;没有执行 - 应该转换为“用户名”和文本颜色应该是浅灰色

如果有一些我显然遗失的东西，任何人都可以提供完整的功能，我将非常感激。

PS我似乎无法弄清楚如何