<style type="text/css">
        .myClass{
            color:#c0c0c0
        }
    </style>
  <script type="text/javascript" src="../js/jquery-1.6.js"></script></head>
    <table border="1" align="center">
        <tr>
            <th>用户名</th>
            <td>
                <input type="text" value="输入用户名"/>
            </td>
        </tr>
    </table>
    <script type="text/javascript">
    
    //页面加载的时候给input添加样式
    $(function(){
        
        $("input").addClass("myClass");
        
    })
    
    //获得焦点的时候把value设为""
    $("input").focus(function(){
        
        $(this).val("");
        
    })
    
    //得到焦点的时候，判断用户有没有输入内容，如果用户输入了内容，则显示用户输入的内容，否则恢复显示"输入用户名"
    $("input").blur(function(){
        
        var value = $(this).val();
        if($.trim(value).length==0)
        {
           $(this).val("输入用户名");   
        }
    })
    

    
    </script>