JS 網頁快捷鍵設置


我們希望能用快捷鍵代替鼠標點擊做一些事情,例如一個典型的應用就是論壇上常用的Ctrl + Enter 快捷發帖子。就以Ctrl+Enter快捷發帖子為例,實質上呢,就是通過JS腳本,捕獲系統的onkeyup事件,判斷event.ctrlKey是否為true並且event.keyCode為13,如果滿足這個條件,那么就調用按鈕對象的click()方法,等同於用鼠標去點擊按鈕。寫個簡單的示例代碼:

<html>

<head>

   <title> <font style='color:blue; background-color:yellow;'>快捷鍵</font>提交示例代碼 </title>
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
   <meta name="author" content="寶玉" />

<script language="JavaScript" type="text/javascript">
<!--
// <font style='color:blue; background-color:yellow;'>快捷鍵</font>響應 
// targetObj: 目標對象,如果滿足<font style='color:blue; background-color:yellow;'>快捷鍵</font>條件,觸發目標對象的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>

出處:http://hi.baidu.com/cty901/blog/item/bb293d4e4cfe2e11b2de0559.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM