TextBoxWatermark文本框水印效果

实现文本框水印效果,主要有两方面的内容
1.文本框css效果
2.onfocus跟onblur的js处理
以下是源代码,请大家多多指教。
css:
unwatermarked  {
    height
:18px;
    width
:148px;
}


.watermarked 
{
    height
:20px;
    width
:150px;
    padding
:2px 0 0 2px;
    border
:1px solid #BEBEBE;
    background-color
:#F0F8FF;
    color
:gray;
}

控件代码:
   
/// <summary>
    
/// 
    
/// </summary>

     public   class  TextBoxWatermark : TextBox
    
{
        
/// <summary>
        
/// 
        
/// </summary>

        public TextBoxWatermark()
            : 
base()
        
{
            
this.CssClass = "watermarked";
        }

        
/// <summary>
        
/// 
        
/// </summary>
        
/// <param name="writer"></param>

        protected override void AddAttributesToRender(System.Web.UI.HtmlTextWriter writer)
        
{
            
base.AddAttributesToRender(writer);
            writer.AddAttribute(
"HiddenText"this.Text);
            writer.AddAttribute(
"onfocus""if(this.value == this.HiddenText){this.value ='';this.className='unwatermarked';}");
            writer.AddAttribute(
"onblur""if(this.value == ''){this.value=this.HiddenText;this.className='watermarked';}");
        }

    }

你可能感兴趣的:(water)