zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    select 标签的数据绑定
    JQ选择器-选择符合条件的元素,获取对应关系元素
    Velocity中判断表达式是不是为空
    重要的serialVersionUID
    编译nginx的时候报错 需要安装PCRE
    Mac 允许安装任何来源的app
    Charles
    Excel_日期和时间函数、EDATE、EOMONTH
    项目9: 成绩中国式排名(难度:中等)
    Mysql:IFNULL的使用说明
  • 原文地址:https://www.cnblogs.com/mq0036/p/3289503.html
Copyright © 2011-2022 走看看