急 ASP.NET中页面加载时文本框内有文字 获得焦点时文字消失

<script type="text/javascript" language="javascript">
function cls() {            
            with (event.srcElement)            
                if (value == defaultValue) {
                    value = ""
                    this.style.color = '#000000'
                }
            }
            function res() {               
                with (event.srcElement)                
                    if (value == "") {
                        value = defaultValue
                        this.style.color = '#808080'
                        
                    }
                } 
    </script><asp:TextBox ID="tbname" runat="server" Width="128px"  TabIndex="1" Text="用户名" onfocus="cls()" onblur="res()" ForeColor="Gray"></asp:TextBox>
<asp:TextBox ID="tbpassward" runat="server" Width="128px"  TabIndex="1" Text="请输入密码" onfocus="cls()" onblur="res()" ForeColor="Gray"></asp:TextBox>我上面这种方式 页面加载时文本框内有文字 获得焦点时文字消失的功能是可以实现的，但是 当获得焦点时 文字的颜色还是gray  应该是黑色的才对2：<asp:TextBox ID="tbname" runat="server" Width="205px" Text="用户名" OnFocus="javascript:if(this.value=='用户名') {this.value='';this.style.color='#000000'}" OnBlur="javascript:if(this.value==''){this.value='用户名;
 
this.style.color='#808080'}" ForeColor="Gray"></asp:TextBox>
这种方式 是可以的  但是也没感觉和上面的有什么不同呀
还有一个问题就是 <asp:TextBox ID="tbpwd" runat="server" Width="128px" TextMode="Password" 
                        TabIndex="2"  Text="密码" OnFocus="javascript:if(this.value=='密码) {this.value='';this.style.color='#000000'}" OnBlur="javascript:if(this.value==''){this.value='密码;
 
this.style.color='#808080'}" ForeColor="Gray"></asp:TextBox> 如果TextMode="Password"  那么好像不起作用，请大家帮忙看看 谢谢

解决方案 »

  1.   

    楼主，我测试了一下，你的代码如果这样写
    <asp:TextBox ID="tbname" runat="server" Width="128px" TabIndex="1" Text="用户名" onfocus="cls()" onblur="res()" ForeColor="Gray"></asp:TextBox>
    <asp:TextBox ID="tbpassward" runat="server" Width="128px" TabIndex="1" Text="请输入密码" onfocus="cls()" onblur="res()" ForeColor="Gray"></asp:TextBox>
    如果开启了脚本调试的话，会报错： 'this.style' 为空或不是对象
    如果按照你的第一种方式写的话，建议改成这样：  <script type="text/javascript">
            function cls(tb) {
                
                    if (tb.value == tb.defaultValue) {
                        tb.value = ""
                        tb.style.color = '#000000'
                    }
            }
            function res(tb) {
                
                    if (tb.value == "") {
                        tb.value = tb.defaultValue
                        tb.style.color = '#808080'                }
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
         <asp:TextBox ID="tbname" runat="server" Width="128px" TabIndex="1" Text="用户名" onfocus="cls(this)" onblur="res(this)" ForeColor="Gray"></asp:TextBox>
    <asp:TextBox ID="tbpassward" runat="server" Width="128px" TabIndex="1" Text="请输入密码" onfocus="cls(this)" onblur="res(this)" ForeColor="Gray"></asp:TextBox>
        </div>
        </form>
    </body>
      

  2.   

    wyumening 谢谢您，我用你写的这个是可以的，但是有一个问题就是 如果textbox 的TextMode="Password"  好像就不起作用了 ，麻烦你在看一看
    <asp:TextBox ID="tbpwd" runat="server" Width="128px" TextMode="Password" 
                            TabIndex="2" Text="输入密码" onfocus="cls(this)" onblur="res(this)" ForeColor="Gray"></asp:TextBox>
      

  3.   


    当 TextMode="Password"时，它的value值是隐藏的，所以就不起作用了，不用管它
      

  4.   

    (function ($) {
        $.fn.water = function (options) {
            // build main options before element iterationvar 
            opts = $.extend({}, $.fn.water.defaults, options);
            return this.each(function () {
                var target = $(this);
                function clear() {
                    if (target.val() == opts.defaultText && target.hasClass(opts.waterCss)) {
                        target.val("").removeClass(opts.waterCss);
                    }
                }            function renderDefault() {
                    if ($.trim(target.val()) === '') {
                        target.val(opts.defaultText).addClass(opts.waterCss);
                    }
                }            // Bind the related event handlers           
                target.focus(clear);
                target.blur(renderDefault);
                target.change(renderDefault);
                renderDefault();
            });    };