写一个给按钮、链接等控件增加快捷键的控件-宝玉的blog

写一个给按钮、链接等控件增加快捷键的控件

肯定有这样子的需求：我们希望能用快捷键代替鼠标点击做一些事情，例如一个典型的应用就是论坛上常用的Ctrl + Enter 快捷发帖子。就以Ctrl+Enter快捷发帖子为例，实质上呢，就是通过js脚本，捕获系统的onkeyup事件，判断event.ctrlKey是否为true并且event.keyCode为13，如果满足这个条件，那么就调用按钮对象的click()方法，等同于用鼠标去点击按钮。写个简单的示例代码： <html> <head> <title> 快捷键提交示例代码 </title> <link rel="stylesheet" href='css/style.css' type="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="author" content="宝玉" /> <script language="JavaScript" type="text/javascript">  </script> </head> <body> <form method="get" action="no.aspx"> <input type="submit" id="myButton"/> Ctrl + Enter </form> </body> </html>

上面的脚本可以方便的给指定的按钮加上快捷键。如果现在我们希望应用到我们的服务器端控件当中去，例如Button、Linkbutton、Hyperlink等，因为控件的ID各不相同，而且所对应的快捷键也各不相同，那么我们就需要写一个控件来给他们添加快捷键了。

想想这个控件需要哪些属性？
TargetControlID:string：既然是给其他控件绑定的，那么所要绑定的目标控件ID是少不了了，根据这个控件ID，我们才能确定一个控件，才能知道它输出时的客户端ID，才能根据客户端ID来在脚本里面确定这个对象。
CtrlKey:bool：判断是否用到Ctrl组合键
ShiftKey:bool：判断是否用到Shift组合键
AltKey:bool：判断是否用到Alt组合键
KeyCode:int：和DHTML里面的event.keyCode对应的，例如Enter的keyCode是13。（注：其实这个不是很友好，因为用的时候还要找一下键盘各个按键和keyCode的对应关系，如果结合一个快捷键设置的控件就比较完美了）
Text:string：可能顺便需要一点文字说明什么的

相对来说，这是一个比较简单的用户自定义控件应用，创建一个名字为HotKey的类，继承自System.Web.UI.Controls。根据目标控件ID查找控件对象：this.cachedTargetControl = this.NamingContainer.FindControl(this.TargetControlID);
根据上面属性，我们就可以生成相应的客户端脚本了，然后在重写控件的OnPreRender事件中使用RegisterClientScriptBlock方法输出脚本。

代码相对比较简单：

using System;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.Design;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;

namespace CommunityServer.Controls
{
	/// <summary>
	/// hotkey
	/// author: dotey
	/// http://www.communityserver.cn
	/// </summary>
	public class Hotkey : Control
	{
		private static readonly String scriptKey = "CommunityServer.Controls.Hotkey";
		
		public Hotkey()
		{
		}

protected override void OnPreRender(EventArgs e)
		{
			base.OnPreRender (e);

string hotkeyFunctionScript = @"
<script>
function Hotkey(event, targetObj, ctrlKey, shiftKey, altKey, keycode)
{
	if (
		targetObj
		&& event.ctrlKey == ctrlKey 
		&& event.shiftKey == shiftKey 
		&& event.altKey == altKey 
		&& event.keyCode == keycode
		)
		targetObj.click();
}
</script>
";

if ( !Page.IsClientScriptBlockRegistered( scriptKey ) ) 
			{
				this.Page.RegisterClientScriptBlock( scriptKey, hotkeyFunctionScript );
			}

string key = scriptKey + "-" + targetControl.ClientID;
			if ( targetControl != null && !Page.IsClientScriptBlockRegistered( key ) ) 
			{
				this.Page.RegisterClientScriptBlock( key, CreateScript() );
			}

}

protected override void Render(HtmlTextWriter writer)
		{
			base.Render (writer);
			writer.Write(this.Text);
		}

/// <summary>
		/// 根据属性生成相关脚本
		/// </summary>
		/// <returns></returns>
		private string CreateScript()
		{
			if ( targetControl == null )
				return "";

string functionName = string.Format("fn{0}Keyup", targetControl.ClientID);

StringBuilder s = new StringBuilder();
			s.Append("<script>\n");
			s.AppendFormat("function {0}(event)\n", functionName);
			s.Append("{\n");
			s.AppendFormat("\tvar b = document.getElementById('{0}');\n", targetControl.ClientID);
			s.AppendFormat("\tHotkey(event, b, {0}, {1}, {2}, {3});\n", 
				this.CtrlKey.ToString().ToLower(),
				this.ShiftKey.ToString().ToLower(),
				this.AltKey.ToString().ToLower(),
				this.KeyCode
				);
			s.Append("}\n");

s.Append("if (document.addEventListener)\n");
			s.AppendFormat("\tdocument.addEventListener('keyup', {0}, true);\n", functionName);
			s.Append("else\n");
			s.AppendFormat("\tdocument.attachEvent('onkeyup', {0});\n", functionName);
			s.Append("</script>\n");

return s.ToString();
		}

/// <summary>
		/// 目标控件
		/// </summary>
		[
		Category("Behavior"),
		DefaultValue(""),
		]
		public virtual String TargetControlID 
		{
			get 
			{
				object savedState = this.ViewState["TargetControlID"];
				if ( savedState != null ) 
				{
					return (String)savedState; 
				}
				return "";
			}
			set 
			{
				this.ViewState["TargetControlID"] = value;
				this.cachedTargetControl = null;
			}
		}

/// <summary>
		/// 根据目标控件的ID来找目标控件对象
		/// </summary>
		private Control targetControl 
		{
			get 
			{
				if ( cachedTargetControl == null ) 
				{
					this.cachedTargetControl = this.NamingContainer.FindControl(this.TargetControlID);
				}
				return this.cachedTargetControl;
			}
		}
		private Control cachedTargetControl = null;

/// <summary>
		/// 文字说明
		/// </summary>
		[
		System.ComponentModel.DefaultValue( "Caption" ),
		]
		public virtual String Text 
		{
			get 
			{

Object state = ViewState["Text"];
				if ( state != null ) 
				{
					return (String)state;
				}
				return "";
			}
			set 
			{
				ViewState["Text"] = value;
			}
		}

/// <summary>
		/// 和DHTML里面的event.keyCode对应的，例如Enter的keyCode是13。
		/// </summary>
		/// <remarks>
		/// 其实这个不是很友好，因为用的时候还要找一下键盘各个按键和keyCode的对应关系，如果结合一个快捷键设置的控件就比较完美了
		/// </remarks>
		public int KeyCode
		{
			get 
			{
				int keyCode = 0;
				try
				{
					keyCode = Convert.ToInt32(ViewState["KeyCode"]);
				}
				catch{}

return keyCode;
			}
			set 
			{
				ViewState["KeyCode"] = value;
			}
		}

/// <summary>
		/// 是否使用Alt复合键
		/// </summary>
		public bool AltKey
		{
			get 
			{
				Object state = ViewState["AltKey"];
				if ( state != null ) 
				{
					return (Boolean)state;
				}
				return false;
			}
			set 
			{
				ViewState["AltKey"] = value;
			}
		}

/// <summary>
		/// 是否使用Shift复合键
		/// </summary>
		public bool ShiftKey
		{
			get 
			{
				Object state = ViewState["ShiftKey"];
				if ( state != null ) 
				{
					return (Boolean)state;
				}
				return false;
			}
			set 
			{
				ViewState["ShiftKey"] = value;
			}
		}

/// <summary>
		/// 是否使用Ctrl复合键
		/// </summary>
		public bool CtrlKey
		{
			get 
			{
				Object state = ViewState["CtrlKey"];
				if ( state != null ) 
				{
					return (Boolean)state;
				}
				return false;
			}
			set 
			{
				ViewState["CtrlKey"] = value;
			}
		}

}
}

最后，调用的时候就比较方便了：
和普通的自定义用户控件一样：
<asp:Button Runat="server" id="PostButton" CssClass="txt3"></asp:Button>
<cs:Hotkey runat="server" TargetControlID="PostButton" KeyCode="13" CtrlKey="True" Text="(Ctrl + Enter)"/>
完整的应用请参考CCS1.1(http://www.communityserver.cn/ )的代码。

打印 | 张贴于 2005-10-29 23:29:00 | Tag:Web技术 Community Server

留言反馈

#veysaync - Google Search 编辑

veysaync - Google Search

2008-10-05 05:20:49 | [匿名:]

#[导入]写一个给按钮、链接等控件增加快捷键的控件编辑

肯定有这样子的需求：我们希望能用快捷键代替鼠标点击做一些事情，例如一个典型的应用就是论坛上常用的Ctrl Enter快捷发帖子。就以Ctrl Enter快捷发帖子为例，实质上呢，就是通过js脚本...

2008-01-04 21:01:00 | [匿名:阿斌]

#回复: 写一个给按钮、链接等控件增加快捷键的控件编辑

写的很不错啦我用了可以实现的

2007-11-08 13:34:00 | [匿名:chinese_xiaobai]

#回复: 写一个给按钮、链接等控件增加快捷键的控件编辑

/// <summary>
/// 是否使用Alt复合键
/// </summary>
public bool AltKey ...

这里两个错误：
1. AltKey 命名错误。应该用类似 isAltKeyUsed 的名称。
2. comment 错误。“是否使用Alk复合键”意义含糊。正确的注释是：Returns true if alt key is used, or false if alt key is not used.

其他的你可以自己琢磨。

1 命名规则问题按照我习惯我直接写“使用Alt”
2 注释。宝玉写的再怎么含糊也比你写的E文要好多了！那东西我根本就看不懂

3 “其他的你可以自己琢磨。 ” 好像你是什么老大似的

2007-08-06 12:30:00 | [匿名:小贝]

#回复: 写一个给按钮、链接等控件增加快捷键的控件编辑

学到不少东西。
谢谢！

2007-03-30 12:08:00 | [匿名:学到不少东西]

#回复: 写一个给按钮、链接等控件增加快捷键的控件编辑

用这个控件是不是需要asp.net2.0呢？

2006-12-13 15:41:00 | [匿名:gargoyle]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

用这个控件是不是需要asp.net2.0呢？我的是1.1的，没用起来

2006-10-16 18:18:00 | [匿名:FF]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

还好！
是好用呀！
我顶你呀！！

2006-05-29 10:52:00 | [匿名:暗暗啊]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

只不过，leson啊，你懂得多，是好事，咱们中国又多了一个人才。但是，每个人的思想都是不同的，每个人的做事方式是不一样的，要达到一种效果，是可以走很多条路的，所谓路路通罗马嘛。你懂，但你是以你的方式去实现，但人家还有很多种方式你还不知道呢。你懂，不代表你全都会啊。

2006-03-31 22:45:00 | [匿名:Jackal]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

大家都没错,只是大家有自己的方法，结果一样就好了

2006-03-31 22:41:00 | [匿名:Jackal]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

果然学究，酸气冲天。

2006-03-14 17:14:00 | [匿名:leisang]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

leson这个人是属于老学究性的,跟这样的人较真什么啊!他们是很教条的.

2005-12-06 01:06:00 | [匿名:stranger]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

2005-11-06 14:46:00 | [匿名:hao ]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

高度怀疑你是芙蓉姐姐的某个亲戚，你是来娱乐大家的，我对不住您，你继续，我撤离，不过做人要谦虚，别动不动拿东西压人，如果你对这个地方很反感，或者有点葡萄酸的心理，那么您还是别来了，做人要厚道。

2005-11-02 16:56:00 | [匿名:楼上的不厚道]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

娃哈哈，真有趣。remarks标签都出来了。Coding的时候没有这些标签你是不是就不会写comments了？
----
那你还说个P，干脆所有标签都不摇了造你说的，你在偷换前提DD，

函数名称必须以一个动词打头而 namespace 必须用名词
----
AutoPostBack 是 ns？你nb阿，变戏法
/// <summary>
/// 是否使用Alt复合键
/// </summary>
public bool AltKey

namespace 也拿来和 method 命名比较了
--------
你说 AltKey是方法？你太nb了我在地球，你在另外一个平行世界，没法和您比。

2005-11-02 16:54:00 | [匿名:楼上的不厚道]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

哎，你还越说越起劲~ namespace 也拿来和 method 命名比较了。同志啊同志，函数名称必须以一个动词打头，而 namespace 必须用名词，这点基础的常识总应该有吧。

2005-11-02 13:45:00 | [匿名:leson]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

娃哈哈，真有趣。remarks标签都出来了。Coding的时候没有这些标签你是不是就不会写comments了？

对于函数的注释，第一句话就要明确地阐述这个函数的input和output及其关联性。这个函数接受什么，返回的结果是什么。至于一些冗长的部分，才能放到你所谓的remark里面去。

2005-11-02 13:34:00 | [匿名:leson]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

更正上文：System.Web.UI.WebControls.RadioButton.IsAutoPostBack 好
真是糊涂啊，最讨厌你这样的人了，挑毛病就挑，还说这里的人误人子弟，什么东西嘛，把你还来个ji8。

2005-11-02 13:32:00 | [匿名:楼上的不厚道]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

/// <summary>
/// 是否使用Alt复合键
/// </summary>
public bool AltKey ...

这里两个错误：
1. AltKey 命名错误。应该用类似 isAltKeyUsed 的名称。

拜托！！有点常识~
asp tag里的attributes defination和method defination是一个概念的东西吗？？attributes如果这样naming就是错误！

那请教 System.Web.UI.WebControls.RadioButton.AutoPostBack 好还是
System.Web.UI.WebControls.IsRadioButton.AutoPostBack 好，
如果是您的好，我建议发起倡议让MS改了吧，也TMD太误人子弟了

另外，说起emacs 你小子撞枪口上了，你算个毛阿，就你那点道行。

2005-11-02 13:31:00 | [匿名:楼上的不厚道]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

估计leson不知道什么是 remarks 标签了

2005-11-02 12:35:00 | [匿名:楼上的不厚道]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

. comment 错误。“是否使用Alk复合键”意义含糊。正确的注释是：Returns true if alt key is used, or false if alt key is not used.

类似这些话，建议宝玉放到 remarks标签里，这位爷是来搞笑的估计

2005-11-02 12:34:00 | [匿名:楼上的不厚道]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

等你是国家主席，下令全国按照你的命名来的话，那么楼上几位就是错了，可惜你好还不是。命名还有对错的，老子笑死。还说别人没常识，你自己的常识呢？书读多了吧呆子。

2005-11-02 12:33:00 | [匿名:楼上的不厚道]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

楼上：

拜托！！有点常识~
asp tag里的attributes defination和method defination是一个概念的东西吗？？attributes如果这样naming就是错误！

2005-11-02 12:21:00 | [匿名:leson]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

@leson

我从不针对细枝未节进行评论,要知道,写文章目的在于总结、启发、收获。

你应该从本文的标题（即要论述的主题）入手，进行评论，并给出建议。

在说，命名方式各有各的规范，并不见得你说的就对。

asp:DataGrid id="DataGrid1" runat="server" AutoGenerateColumns="False"

没有写成 IsAutoGenerateColumns 那你也应该由此大声疾呼 WEB控件是误人的东东嘛！！！

2005-11-02 09:16:00 | [匿名:leson 是宝气]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

谢谢各位的评论，实际leson批评的确实是对的，“楼上的不厚道 ”说的也对，看东西多看全局，取精华取糟粕。
我写blog有两个目的：
1. 对得到一些批评和指导
2. 能对别人有所启发

2005-11-01 10:32:00 | [匿名:宝玉]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

哈哈，那你来评啊？你评什么我猜得到：好文！奇文！我顶！！

2005-11-01 09:47:00 | [匿名:leson]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

@leson

我以为你要拿什么好东东出来,结果是在这儿显摆;连我一贯潜水的人都想忍不住了!

简直乱评一通!!!

2005-11-01 09:25:00 | [匿名:leson 是宝气]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

to baoyu
好态度！那我就要开始抬杠了。随便拿出一段：

/// <summary>
/// 是否使用Alt复合键
/// </summary>
public bool AltKey ...

这里两个错误：
1. AltKey 命名错误。应该用类似 isAltKeyUsed 的名称。
2. comment 错误。“是否使用Alk复合键”意义含糊。正确的注释是：Returns true if alt key is used, or false if alt key is not used.

其他的你可以自己琢磨。

2005-10-31 22:03:00 | [匿名:leson]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

你如何知道俺就是用ms的，说不定你还是我小弟呢，信不信阿，IT界很小的，说其好，是说这个点子，不是说代码，俺根本就没看代码，你只会抓住细节不放，俺看的是大局，这就是你还达不到的层次阿小DD。

2005-10-31 14:18:00 | [匿名:楼上的不厚道]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

leson批评的在理，不过我个人真诚的希望能给出具体意见，例如可以针对上面的代码来一个优化，重新comments一下，把不好的变成好的，这样我这篇blog也不算白写也不至于误人子弟了。
盼复！

2005-10-31 10:01:00 | [匿名:宝玉]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

就知道顶啊，赞啊，佩服啊，连什么是好东西什么是坏东西都不分了，来什么顶什么，各位真有眼光啊。照我看这里贴出来的code大半都是误人子弟用的，没几段看的上眼的。MS工具用久了估计就这毛病，好好读读人家用emacs写出来的code去吧。

2005-10-31 00:00:00 | [匿名:leson]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

楼上的不厚道，好东西先顶，你会写又如何阿，了不起了

2005-10-30 22:54:00 | [匿名:楼上的不厚道]

#re: 写一个给按钮、链接等控件增加快捷键的控件编辑

看你得code就知道你连怎么写comments都不知道。

2005-10-30 13:54:00 | [匿名:leson]

对不起，目前本随笔不允许发表新评论.

宝玉的blog

导航

关于

标签

每月存档

最新留言

广告

留言反馈