zoukankan      html  css  js  c++  java
  • 设置网页快捷键原理

    在很多网页中,可以使用快捷来完成一定的动作,比如discuz论坛的“完成后可按 Ctrl+Enter 发布”功能!

      这样的功能是用JavaScript中的event属性的KeyCode方法完成,利用onKeyDown事件进行驱动。
      在JavaScript中,可以通过keyCode属性来得到用户所按键的ASSCII码值。具体对应关系可以查ASSCII码表。
    例子:

    CODE:  [Copy to clipboard]
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function hotkey()
    {
    var a=window.event.keyCode;
    if(a==65)
    {
    alert("你按了a键吧");
    }
    }// end hotkey

    document.onkeydown = hotkey; //当onkeydown 事件发生时调用hotkey函数
    //-->
    </SCRIPT>


      另外,在快捷键的使用中,Alt、Ctrl、shift等辅助键也是经常用到的,可以通过altKey、ctrlKey、shiftKey这三个属性来判断Alt、Ctrl、shift键的状态
    比如event.ctrlKey的值为真,就说明用户按下了Ctrl键。
    例子:
    CODE:  [Copy to clipboard]
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function hotkey()
    {

    if(event.ctrlKey)
    {
    alert("你按了Ctrl键吧");
    }
    }// end hotkey

    document.onkeydown = hotkey; //当onkeydown 事件发生时调用hotkey函数
    //-->
    </SCRIPT>


      可以组合起来,形成真正的快捷键,将执行语句换为你要的效果就可以了。
    CODE:  [Copy to clipboard]
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function hotkey()
    {
    var a=window.event.keyCode;
    if((a==65)&&(event.ctrlKey))
    {
    alert("你按了ctrl+a键吧");
    }
    }// end hotkey

    document.onkeydown = hotkey; //当onkeydown 事件发生时调用hotkey函数
    //-->
    </SCRIPT>


      document.onkeydown = hotkey 语句是在全页面中,当用户按下键时,调用hotkey函数,也许你希望在页面局部实现快捷键功能,那么,你可以仿照下面这样做(记得删除"document.onkeydown = hotkey"语句):


    CODE:  [Copy to clipboard]
    <textarea rows="7" cols="90" name="message" onKeyDown="javascript: hotkey();" tabindex="2"></textarea>

      这样,只有当光标焦点在文本框中才能使用快捷键。

     

    上一篇:如何通过js脚本复制网页上的一个表格?
    下一篇:JavaScript极速狂飙:组合拼接字符串的效率
    最新评论 更多评论
    呵呵,一起学习!谢谢支持小超
    ——小超评论于2005年12月24日 20:39:34
    今天学到一点点 谢谢
    ——雨后的风评论于2005年12月22日 22:11:02

    您还没有登录,暂时不能发表评论,请先登录!

    [登录] [注册]

    <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, false, false, false, 49);
    }

    if (document.addEventListener)
        document.addEventListener("keyup",fnKeyup,true);
    else
        document.attachEvent("onkeyup",fnKeyup);

    //-->
    </script>
     

  • 相关阅读:
    java设计模式之建造者模式
    java设计模式之工厂模式
    Java并发—简介与线程创建
    Java基础—反射(转载)
    Eclipse中svn操作
    js常用方法总结
    Oracle学习笔记—常用函数
    Oracle学习笔记—connect、resource和dba三种权限(转载)
    JavaWeb—拦截器Interceptor
    JavaWeb—监听器Listener
  • 原文地址:https://www.cnblogs.com/qqhfeng/p/2152570.html
Copyright © 2011-2022 走看看