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