我们在做用户登陆的时,很多时候我们的密码是区分大小写的,这就存在一个问题.如果你的Caps Lock键是亮着的,尽管你输入的密码是对的,也无法登陆.所以我们有必要在Caps Lock被按下的时候,提示用户.这就是这篇文章所要讲的.
你阅读过本文,你可以有一下几点收获
1:拥有一个免费的插件(可以提示Caps Lock)
2:你会对MicroSoft的验证控件有全新的认识(MicroSoft的验证控件的原理就是这样,当然比这复杂)
3:你将了解到在Assembly嵌入外部resource
MQTools控件
本控件的功能:为web用户提供密码输入时的提示功能
开发环境:.VS2005
语言:Javascript,C#
Details:
mqTools是MicroSoft控件Label上的基础上扩展的.之所以选择Label是因为Label本身已经具体Text, Font, Width, CssClass等属性,这样我们就可以显示提示信息和控件的外观,但还有一个最重要的属性是需要我们自己去完成的,就是TextBoxControlID属性.这样我们就能指定控件验证的对象.
1:给Label扩展TextBoxControlID属性
我们知道Label被呈现在客户端是的代码是
<span id="ID" >你已经按下了Caps Lock</span>
因此想到了通过它的Style属性去空值它的Hidden和Show.所以我们得重写Label控件的AddAttributesToRender方法!其实微软的很多控件也是通过类似的扩展去控制显示,样式等等.
![](http://www.zxbc.cn/uploads/allimg/080604/0638137.gif)
1![](http://www.zxbc.cn/uploads/allimg/080604/0638130.gif)
2
function CheckCapsLock( e, warnId, dispTime ) {
3
var myKeyCode = 0;
4
var myShiftKey = e.shiftKey;
5
6
if ( document.all ) {
7
// Internet Explorer 4+
8
myKeyCode = e.keyCode;
9
} else if ( document.getElementById ) {
10
// Mozilla / Opera / etc.
11
myKeyCode = e.which;
12
}
13
14
if ((myKeyCode >= 65 && myKeyCode <= 90 ) || (myKeyCode >= 97 && myKeyCode <= 122)) {
15
if (
16
// Upper case letters are seen without depressing the Shift key, therefore Caps Lock is on
17
( (myKeyCode >= 65 && myKeyCode <= 90 ) && !myShiftKey )
18![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
19
||
20![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
21
// Lower case letters are seen while depressing the Shift key, therefore Caps Lock is on
22
( (myKeyCode >= 97 && myKeyCode <= 122 ) && myShiftKey )
23
)
24
{
25
ShowCapsWarning(warnId, dispTime);
26
}
27
else {
28
HideCapsWarning(warnId);
29
}
30
}
31
}
5:怎么在将js脚本嵌入assembly?请看下图,在类库中创建一个js文件,右键查看属性.在生成操作选择"嵌入资源".然后在类库的AssemblyInfo.cs中添加代码如下
[assembly: WebResource("MQTools.JsLib.js", "text/javascript")]
[assembly: WebResource("MQTools.JScript1.js", "text/javascript")]
这样我们就可以使用这个js资源了代码如下
// (1) 注册客户端脚本
Page.ClientScript.RegisterClientScriptInclude("MQTools",
Page.ClientScript.GetWebResourceUrl(this.GetType(),
"MQTools.JsLib.js"));
![](http://www.zxbc.cn/uploads/allimg/080604/063813116.jpg)
最后的效果图如下
![](http://www.zxbc.cn/uploads/allimg/080604/063813117.jpg)
总结:
其实我们看到.这个控件自始至终没有任何难度.关键是你能想到怎么去做.特别是要了解控件的执行顺序,这样我们就可以在控件身上大作文章.
你阅读过本文,你可以有一下几点收获
1:拥有一个免费的插件(可以提示Caps Lock)
2:你会对MicroSoft的验证控件有全新的认识(MicroSoft的验证控件的原理就是这样,当然比这复杂)
3:你将了解到在Assembly嵌入外部resource
MQTools控件
本控件的功能:为web用户提供密码输入时的提示功能
开发环境:.VS2005
语言:Javascript,C#
Details:
mqTools是MicroSoft控件Label上的基础上扩展的.之所以选择Label是因为Label本身已经具体Text, Font, Width, CssClass等属性,这样我们就可以显示提示信息和控件的外观,但还有一个最重要的属性是需要我们自己去完成的,就是TextBoxControlID属性.这样我们就能指定控件验证的对象.
1:给Label扩展TextBoxControlID属性
1
using System;
2
using System.Collections.Generic;
3
using System.Text;
4
using System.Web;
5
using System.Web.UI;
6
using System.Web.UI.WebControls;
9
namespace MQTools
10
{
11
public class MQTools:Label
12
{
13
#region Properties
14
//TextBoxControlID
15
public string TextBoxControlID
16
{
17
//在这里我们使用ViewState,是不想声明变量
18
set {ViewState["TextBoxControlID"]=value;}
19
get
20
{
21
string id = (string)ViewState["TextBoxControlID"];
22
return id==null?string.Empty:id;
23
}
24
}
25![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
26
#endregion
27
}
28
}
29![](http://www.zxbc.cn/uploads/allimg/080604/0638130.gif)
2:初始化时隐藏MQTools验证控件:![](http://www.zxbc.cn/uploads/allimg/080604/0638130.gif)
2
![](http://www.zxbc.cn/uploads/allimg/080604/0638130.gif)
3
![](http://www.zxbc.cn/uploads/allimg/080604/0638130.gif)
4
![](http://www.zxbc.cn/uploads/allimg/080604/0638130.gif)
5
![](http://www.zxbc.cn/uploads/allimg/080604/0638130.gif)
6
![](http://www.zxbc.cn/uploads/allimg/080604/0638130.gif)
9
![](http://www.zxbc.cn/uploads/allimg/080604/0638130.gif)
10
![](http://www.zxbc.cn/uploads/allimg/080604/0638137.gif)
11
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
12
![](http://www.zxbc.cn/uploads/allimg/080604/06381311.gif)
13
![](http://www.zxbc.cn/uploads/allimg/080604/06381311.gif)
14
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
15
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
16
![](http://www.zxbc.cn/uploads/allimg/080604/06381311.gif)
17
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
18
![](http://www.zxbc.cn/uploads/allimg/080604/06381311.gif)
19
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
20
![](http://www.zxbc.cn/uploads/allimg/080604/06381311.gif)
21
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
22
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
23
![](http://www.zxbc.cn/uploads/allimg/080604/06381331.gif)
24
![](http://www.zxbc.cn/uploads/allimg/080604/06381331.gif)
25
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
26
![](http://www.zxbc.cn/uploads/allimg/080604/06381331.gif)
27
![](http://www.zxbc.cn/uploads/allimg/080604/06381331.gif)
28
![](http://www.zxbc.cn/uploads/allimg/080604/06381336.gif)
29
![](http://www.zxbc.cn/uploads/allimg/080604/0638130.gif)
我们知道Label被呈现在客户端是的代码是
![](http://www.zxbc.cn/uploads/allimg/080604/0638130.gif)
1
protected override void AddAttributesToRender(HtmlTextWriter writer)
2
{
3
base.AddAttributesToRender(writer);
4
writer.AddStyleAttribute(HtmlTextWriterStyle.Visibility, "hidden");
5
writer.AddStyleAttribute(HtmlTextWriterStyle.Display, "none");
6
}
3:准备工作差不多了.那么我们怎么样去提示呢.由于是当用户开始输入的时候,我们就要提示,所以我想到了Client side代码Javasctipt的事件:onkeypress,所以我们下面要做的就是怎么使我们的输入框触发onkeypress事件!这时我们就要重写![](http://www.zxbc.cn/uploads/allimg/080604/0638130.gif)
2
![](http://www.zxbc.cn/uploads/allimg/080604/0638137.gif)
3
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
4
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
5
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
6
![](http://www.zxbc.cn/uploads/allimg/080604/06381336.gif)
1
protected override void OnPreRender(EventArgs e)
2
{
5
if (this.Enabled)
6
{
7
// (1) 注册客户端脚本
8
if (this.Page != null && !this.Page.ClientScript.IsClientScriptIncludeRegistered(this.GetType(), "MQTools"))
Page.ClientScript.RegisterClientScriptInclude("MQTools",
9
Page.ClientScript.GetWebResourceUrl(this.GetType(),
10
"MQTools.JsLib.js"));
11
// (2) Call CheckCapsLock
12
TextBox tb = GetTextBoxControl();
14
tb.Attributes.Add("onkeypress", string.Format("CheckCapsLock(event, '{0}', {1});", this.ClientID, this.WarningDisplayTime));
16
}
17
base.OnPreRender(e);
18
}
4:剩下的就是去完成我们的Javascript脚本了.这个没有什么好说的,直接看代码吧![](http://www.zxbc.cn/uploads/allimg/080604/0638130.gif)
2
![](http://www.zxbc.cn/uploads/allimg/080604/0638137.gif)
5
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
6
![](http://www.zxbc.cn/uploads/allimg/080604/06381311.gif)
7
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
8
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
Page.ClientScript.RegisterClientScriptInclude("MQTools",
9
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
10
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
11
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
12
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
14
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
16
![](http://www.zxbc.cn/uploads/allimg/080604/06381331.gif)
17
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
18
![](http://www.zxbc.cn/uploads/allimg/080604/06381336.gif)
![](http://www.zxbc.cn/uploads/allimg/080604/0638137.gif)
1
![](http://www.zxbc.cn/uploads/allimg/080604/0638130.gif)
2
![](http://www.zxbc.cn/uploads/allimg/080604/0638137.gif)
3
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
4
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
5
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
6
![](http://www.zxbc.cn/uploads/allimg/080604/06381311.gif)
7
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
8
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
9
![](http://www.zxbc.cn/uploads/allimg/080604/06381311.gif)
10
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
11
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
12
![](http://www.zxbc.cn/uploads/allimg/080604/06381331.gif)
13
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
14
![](http://www.zxbc.cn/uploads/allimg/080604/06381311.gif)
15
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
16
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
17
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
18
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
19
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
20
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
21
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
22
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
23
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
24
![](http://www.zxbc.cn/uploads/allimg/080604/06381311.gif)
25
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
26
![](http://www.zxbc.cn/uploads/allimg/080604/06381331.gif)
27
![](http://www.zxbc.cn/uploads/allimg/080604/06381311.gif)
28
![](http://www.zxbc.cn/uploads/allimg/080604/06381310.gif)
29
![](http://www.zxbc.cn/uploads/allimg/080604/06381331.gif)
30
![](http://www.zxbc.cn/uploads/allimg/080604/06381331.gif)
31
![](http://www.zxbc.cn/uploads/allimg/080604/06381336.gif)
![](http://www.zxbc.cn/uploads/allimg/080604/0638130.gif)
![](http://www.zxbc.cn/uploads/allimg/080604/0638130.gif)
![](http://www.zxbc.cn/uploads/allimg/080604/0638130.gif)
![](http://www.zxbc.cn/uploads/allimg/080604/0638130.gif)
![](http://www.zxbc.cn/uploads/allimg/080604/0638130.gif)
![](http://www.zxbc.cn/uploads/allimg/080604/0638130.gif)
![](http://www.zxbc.cn/uploads/allimg/080604/063813116.jpg)
最后的效果图如下
![](http://www.zxbc.cn/uploads/allimg/080604/063813117.jpg)
总结:
其实我们看到.这个控件自始至终没有任何难度.关键是你能想到怎么去做.特别是要了解控件的执行顺序,这样我们就可以在控件身上大作文章.