提示按下大写键的控件:MQTool(提供下载)

我们在做用户登陆的时,很多时候我们的密码是区分大小写的,这就存在一个问题.如果你的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属性
   

 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        Properties#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
26        #endregion
27    }
28}
29

    2:初始化时隐藏MQTools验证控件:
    我们知道Label被呈现在客户端是的代码是

< span  id ="ID"   > 你已经按下了Caps Lock </ span >

    因此想到了通过它的Style属性去空值它的Hidden和Show.所以我们得重写Label控件的 AddAttributesToRender方法!其实微软的很多控件也是通过类似的扩展去控制显示,样式等等.

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事件!这时我们就要重写
   

 1   protected   override   void  OnPreRender(EventArgs e)
 2          {
 5            if (this.Enabled)
 6            {
 7                // (1) 注册客户端脚本
 8                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脚本了.这个没有什么好说的,直接看代码吧

Code
 1
 2function 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
19            ||
20
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.cnblogs.com/Files/mqcan/MqTools.zip