通过自定义控件实现文本框获得输入焦点时的状态
昨天看了李华顺的博客里的一片关于通过JS实现文本框获得输入焦点时的状态 ,感觉挺不错的,正好自己对自定义WEB控件这一块不熟悉,就试着参照他的文章写了一个简单的自定义控件。实在太菜了!高手多多指点!!
1.首先我们先创建一个WEB控件库
2.在生成的CS文件中添加代码,将下面的代码添加到CS中:
1.首先我们先创建一个WEB控件库
2.在生成的CS文件中添加代码,将下面的代码添加到CS中:
1using System;
2using System.Collections.Generic;
3using System.ComponentModel;
4using System.Text;
5using System.Web;
6using System.Web.UI;
7using System.Web.UI.WebControls;
8
9namespace MyWebControlLibrary1
10{
11 [DefaultProperty("Text")]
12 [ToolboxData("<{0}:MyTextBox runat=server></{0}:MyTextBox>")]
13 public class MyTextBox : TextBox
14 {
15 [Bindable(true)]
16 [Category("Appearance")]
17 [DefaultValue("")]
18 [Localizable(true)]
19 public string Text
20 {
21 get
22 {
23 String s = (String)ViewState["Text"];
24 return ((s == null) ? String.Empty : s);
25 }
26
27 set
28 {
29 ViewState["Text"] = value;
30 }
31 }
32
33 public string FocusCssClass//控件获得焦点时的CSS
34 {
35 get
36 {
37 object obj = this.ViewState["FocusCssClass"];
38 if (obj != null)
39 {
40 return (string)obj;
41 }
42 return "";
43 }
44 set
45 {
46 this.ViewState["FocusCssClass"] = value;
47 }
48 }
49
50 protected override void OnInit(EventArgs e)
51 {
52 base.Attributes.Add("OnFocus", "JavaScript:this.className = '" + this.FocusCssClass + "';");
53 base.Attributes.Add("OnBlur", "JavaScript:this.className = '" + this.CssClass + "';");
54
55 base.OnInit(e);
56 }
57
58
59 protected override void RenderContents(HtmlTextWriter output)
60 {
61 output.Write(Text);
62 }
63 }
64}
65
2using System.Collections.Generic;
3using System.ComponentModel;
4using System.Text;
5using System.Web;
6using System.Web.UI;
7using System.Web.UI.WebControls;
8
9namespace MyWebControlLibrary1
10{
11 [DefaultProperty("Text")]
12 [ToolboxData("<{0}:MyTextBox runat=server></{0}:MyTextBox>")]
13 public class MyTextBox : TextBox
14 {
15 [Bindable(true)]
16 [Category("Appearance")]
17 [DefaultValue("")]
18 [Localizable(true)]
19 public string Text
20 {
21 get
22 {
23 String s = (String)ViewState["Text"];
24 return ((s == null) ? String.Empty : s);
25 }
26
27 set
28 {
29 ViewState["Text"] = value;
30 }
31 }
32
33 public string FocusCssClass//控件获得焦点时的CSS
34 {
35 get
36 {
37 object obj = this.ViewState["FocusCssClass"];
38 if (obj != null)
39 {
40 return (string)obj;
41 }
42 return "";
43 }
44 set
45 {
46 this.ViewState["FocusCssClass"] = value;
47 }
48 }
49
50 protected override void OnInit(EventArgs e)
51 {
52 base.Attributes.Add("OnFocus", "JavaScript:this.className = '" + this.FocusCssClass + "';");
53 base.Attributes.Add("OnBlur", "JavaScript:this.className = '" + this.CssClass + "';");
54
55 base.OnInit(e);
56 }
57
58
59 protected override void RenderContents(HtmlTextWriter output)
60 {
61 output.Write(Text);
62 }
63 }
64}
65
最后右击生成,这样就生成了自己的WEB控件了!呵呵,太简单了! 是不是?
生成完了以后你会发现同时在工具箱里也添加了这个控件,现在你可以新建一个页面,然后托进去试试。
哦,在使用的时候注意这个自定义控件的多了一个自定义的属性FocusCssClass,这个属性是文本框获得焦点时的CSS样式,而本身自带的CssClass则是失去焦点时的CSS样式。现在你可以自己随便写一个样式表,自己随意定义自己喜欢的文本框获得焦点和失去焦点时的样式!!
源码下载点这里