缩略图
程序开发 \ javascript \

为页面添加快捷键响应

DDBug on 2010-03-30 with 2,102 views , no comment

虽然wordpress的默认主题也把该链接加入到了页面中，因为这确实为管理网站带来了方便。但我总觉得像“登录控制台”这样的链接不应该出现在页面上，所以一直没有在主题中加入这样的链接。但是时间长了，也感觉老是从地址栏输入登录地址也有些不方便，于是就想到了给页面添加一个登录后台的快捷键。

首先写一个响应事件的js函数
function getKeyCode(evt) {
evt = (evt) ? evt : ((window.event) ? window.event : "");
if(evt) {
// 按下Ctrl+L键后打开后台页面
if(evt.ctrlKey&&evt.keyCode==76)
window.open("http://domety.com/wp-admin/");
}
}
这样的函数并没有什么难点，主要就是要知道对应按键的键码（本例中使用的快捷键是Ctrl+L，L的键码是76）。
接下来在body元素响应onkeydown事件
<body onkeydown="getKeyCode(event)">
同样，我们也可以为评论回复按钮添加快捷键(通常为Ctrl+Enter)，当然你也可以定义一个响应函数，或者在上面函数的基础稍作修改。不过我认为最简单和最直接的方法是把响应代码直接写到form元素的属性里，因为代码很短，如下
onkeydown="if(event.ctrlKey&&event.keyCode==13)this.submit.click()"
只需要在form的属性中把上面一段代码加进去即可，在wordpress中，form一般位于comments.php文件中。
拓展一下思路，还可以为你的网站添加一些更好玩的快捷键，比如说“上一篇文章”、“下一篇文章”、“评论”等等……
下面是一张键盘的键码对照表，以供参考，或者去我的domety实验室查询http://lab.domety.com/keycode/
添加评论

还没有评论，快抢沙发

添加评论