zoukankan      html  css  js  c++  java
  • 网页里的快捷键

    解决思路: 先给链接定义快捷键,然后在用户按下快捷键时捕捉其按键,判断文档中聚集的对象是否为链接,是否按下Alt键,除Alt外另一键是否与激活链接的快捷设置一致,都是的话就在新窗口中打开链接。 具体步骤
    代码示例: 1.先给链接设置快捷键。
    <a href="http://www.flash8.net" accessKey="F">闪吧</a> <a href="http://www.blueidea.com" accessKey="B">经典</a> <a href="http://www.5d.cn" accessKey="5">5D</a>
    2.因为 accessKey 的作用仅仅是聚集到链接对象,不会自动打开链接,需要对按钮事件进行判断处理。
    document.onkeyup=function(){       //松开按钮时触发函数 obj=document.activeElement    //捕获文档中当前激活的对象  //打开链接的条件:对象必须为链接、Alt键和链接的快捷键同时被按下 if(obj.tagName=="A"&&event.altKey&&String.fromCharCode(event.keyCode)==obj.accessKey.toUpperCase())                          window.open(obj.href,obj.target)          //开新窗口打开链接地址 }
    3.完整代码。
    <script> document.onkeyup=function(){       //松开按钮时触发函数 obj=document.activeElement    //捕获文档中当前激活的对象  //打开链接的条件:对象必须为链接、Alt键和链接的快捷键同时被按下 if(obj.tagName=="A"&&event.altKey&&String.fromCharCode(event.keyCode)==obj.accessKey.toUpperCase())                          window.open(obj.href,obj.target) //根据原链接的target打开链接地址 } </script> <a href="http://www.flash8.net" accessKey="F">闪吧</a> <a href="http://www.blueidea.com" accessKey="B">经典</a> <a href="http://www.5d.cn" accessKey="5">5D</a>
    注意:obj.tagName=="A" 中的 A 必须大写。 技巧:window.open(obj.href,obj.target) 可以改为 obj.click()。 试一试:读者可以试着让所有按快捷键触发的链接都在一个固定的名为 link 的窗口中打开。 特别提示 运行代码,依次按 Alt+F、Alt+B和Alt+5,将分别打开三个链接。

    特别说明

    本例代码虽然简单,但涉及到的知识点比较多。先是设置链接的快捷键,然后捕获按键事件,在按键事件触发的函数中取得当前被激活的对象,并该对象是否为链接,而且Alt和该链接对象的中设置快捷键被按下,是则打开链接地址。 1.event.altKey 设置或获取 Alt 键的状态 2.event.keyCode 设置或获取与导致事件的按键关联的 Unicode 按键代码 3.String.fromCharCode([code1[, code2[, ...[, codeN]]]]) 从一些 Unicode 字符值中返回一个字符串 4.obj.accessKey 返回对象的快捷键值 5.String.toUpperCase() 返回一个字符串,该字符串中的所有字母都被转化为大写字母

  • 相关阅读:
    P2155 [SDOI2008]沙拉公主的困惑
    P4345 [SHOI2015]超能粒子炮·改
    乘法逆元
    P1608 路径统计
    P1342 请柬
    一些网址
    20/08/02测试
    ivqBlog 开源博客 (angularjs + express + mongodb)
    angularjs, nodejs, express, gulp, karma, jasmine 前端方案整合
    参照nopCommerce框架开发(NextCMS)
  • 原文地址:https://www.cnblogs.com/canwyq/p/3182494.html
Copyright © 2011-2022 走看看