JS 网页快捷键设置

来源：互联网发布：广联达软件有哪些编辑：程序博客网时间：2024/04/30 10:40

我们希望能用快捷键代替鼠标点击做一些事情，例如一个典型的应用就是论坛上常用的Ctrl + Enter 快捷发帖子。就以Ctrl+Enter快捷发帖子为例，实质上呢，就是通过JS脚本，捕获系统的onkeyup事件，判断event.ctrlKey是否为true并且event.keyCode为13，如果满足这个条件，那么就调用按钮对象的click()方法，等同于用鼠标去点击按钮。写个简单的示例代码：

Html代码

<html>
<head>
<title> 快捷键提交示例代码</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="author" content="宝玉" />
<script language="JavaScript" type="text/javascript">
// 快捷键响应
// targetObj: 目标对象，如果满足快捷键条件，触发目标对象的click事件
// ctrlKey: 是否按住了Ctrl组合键
// shiftKey: 是否按住了Shift组合键
// altKey: 是否按住了Alt组合键
// keycode: 按键对应的数值
function Hotkey(event, targetObj, ctrlKey, shiftKey, altKey, keycode){
if (
targetObj
&& event.ctrlKey == ctrlKey
&& event.shiftKey == shiftKey
&& event.altKey == altKey
&& event.keyCode == keycode
)
targetObj.click();
}
function fnKeyup(event)
{
var b = document.getElementById("myButton");
Hotkey(event, b, true, false, false, 13);
}
// 捕获系统的Keyup事件
// 如果是Mozilla系列浏览器
if (document.addEventListener)
document.addEventListener("keyup",fnKeyup,true);
else
document.attachEvent("onkeyup",fnKeyup);
//-->
</script>
</head>
<body>
<form method="get" action="no.aspx">
<input type="submit" id="myButton"/>
Ctrl + Enter
</form>
</body>
</html>

<html><head>   <title> 快捷键提交示例代码</title>   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   <meta name="author" content="宝玉" /><script language="JavaScript" type="text/javascript">// 快捷键响应 // targetObj: 目标对象，如果满足快捷键条件，触发目标对象的click事件// ctrlKey: 是否按住了Ctrl组合键// shiftKey: 是否按住了Shift组合键// altKey: 是否按住了Alt组合键// keycode: 按键对应的数值function Hotkey(event, targetObj, ctrlKey, shiftKey, altKey, keycode){if (   targetObj   && event.ctrlKey == ctrlKey    && event.shiftKey == shiftKey    && event.altKey == altKey    && event.keyCode == keycode   )   targetObj.click();}function fnKeyup(event){var b = document.getElementById("myButton");Hotkey(event, b, true, false, false, 13);}// 捕获系统的Keyup事件// 如果是Mozilla系列浏览器if (document.addEventListener)document.addEventListener("keyup",fnKeyup,true);elsedocument.attachEvent("onkeyup",fnKeyup);//--></script></head><body><form method="get" action="no.aspx"><input type="submit" id="myButton"/>Ctrl + Enter</form></body></html>

0 0