一个简单的基于jquery的表单输入提示案例

经常在网站会看到类似这样的特效，下面采用jQuery实现下。

思路很简单，用户名输入框获取焦点时判断是否为默认值，如果是则清空否则不清空。该输入框失去焦点时判断输入内容是否为空串或空格，如果是则清空否则不清空。

注：仅仅是个人思路。网站未必是采用这种方式实现的。

<form action="" method="post">
          <table id="tb">
              <tr>
                  <td>用户名</td>
                  <td>
                      <input type="text" value="输入用户名" name="user" id="user"/>
                  </td>
              </tr>
              <tr>
                  <td>密码</td>
                  <td>
                      <input type="password" name="pwd" id="pwd"/>
                  </td>
              </tr>
              <tr>
                  <td>
                      <input type="submit" value="登陆"/>
                  </td>
              </tr>
          </table>
      </form>

css代码：

<style type="text/css">
        #tb{
            width: 400px;
        }
        #user{
            color:gray;
        }
</style>

脚本：

$().ready(function()
        {
            var defaultValue = $("#user").val();
            $("#user").focus(function()//获取焦点时
            {
                $("#user").css("color","black");
                if($("#user").val() == defaultValue)
                    $("#user").val("");
            });
            $("#user").blur(function()//失去焦点时
            {
                if($.trim($("#user").val())=="")
                {
                    $("#user").val(defaultValue);
                    $("#user").css("color","gray");
                }
            });
            
        });

别忘了加上jquery开发框架：

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>

缺陷：如果输入内容恰好是默认值则当输入框失去焦点时内容会清空。