我们希望能用快捷键代替鼠标点击做一些事情,例如一个典型的应用就是论坛上常用的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

JS 网页快捷键设置的更多相关文章

  1. Hotkeys.js 2.0.2 发布,JS 网页快捷键设置,捕获键盘输入和输入的组合键快捷键,它没有依赖

    这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb),gzip:1.9k. 更新内容: 添加测试用例: 添加更多特殊键支持: 修复bug. __ ...

  2. js简单的设置快捷键,hotkeys捕获键盘键和组合键的输入

    设置快捷键 这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb). hotkeys on Githubhotkeys预览 创建 您将需要在您的系 ...

  3. 【Sublime Text】sublime修改默认浏览器及使用不同浏览器打开网页的快捷键设置

    #第一步:安装SideBarEnhancements插件 下载插件,需要“翻墙”,故提供一下该插件的github地址:https://github.com/titoBouzout/SideBarEnh ...

  4. Node.js 网页爬虫再进阶,cheerio助力

    任务还是读取博文标题. 读取app2.js // 内置http模块,提供了http服务器和客户端功能 var http=require("http"); // cheerio模块, ...

  5. Node.js 网页瘸腿稍强点爬虫再体验

    这回爬虫走得好点了,每次正常读取文章数目总是一样的,但是有程序僵住了情况,不知什么原因. 代码如下: // 内置http模块,提供了http服务器和客户端功能 var http=require(&qu ...

  6. Node.js 网页瘸腿爬虫初体验

    延续上一篇,想把自己博客的文档标题利用Node.js的request全提取出来,于是有了下面的初哥爬虫,水平有限,这只爬虫目前还有点瘸腿,请看官你指正了. // 内置http模块,提供了http服务器 ...

  7. 在Ubuntu|CentOS上安装Shutter截图工具及快捷键设置

    简介 Shutter前身叫GScrot,它是一款相当棒的截图软件. 通过Shutter,你可以截取包括选定区域.全屏幕.窗口.窗口内的控件甚至网页的图像.通过内置的强大插件机制,你可以在截图后,对图像 ...

  8. PhpStorm 8.x/9.x 快捷键设置/个性化设置,如何多项目共存?如何更换主题?

    1."自定义"常用快捷键(设置成跟Eclipse差不多) 按照路径:File -> Settings -> Appearance & Behavior -> ...

  9. js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...

随机推荐

  1. hdu1864(01包)

    最大报销额 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  2. Mac无法写入移动硬盘,Mac移动硬盘不能写

    对于使用 Mac 的朋友,有时候难免需会使用移动硬盘.一般的移动硬盘的容量都比较大,再加上国内大多数人使用的都是 Windows 系统,为了通用与方便,所以硬盘的分区一般都是 NTFS 格式的.对于 ...

  3. 从客户端(......)中检测到有潜在危险的 Request.Form 值

    在提交表单时候,asp.net 提示:"从客户端(......)中检测到有潜在危险的 Request.Form 值" .asp.net中的请求验证特性提供了某一等级的保护措施防止X ...

  4. httpclient妙用一 httpclient作为客户端调用soap webservice(转)

    前面有一篇使用HttpClient调用带参数的post接口方法,这里找到一篇使用HttpClient调用Soap协议接口的方式. 原文地址:httpclient妙用一 httpclient作为客户端调 ...

  5. Chrome nacl开启

    Chrome nacl开启

  6. c++ 发送消息,模拟拖拽文件

    #include <ShlObj.h> BOOL SimulateDropFile(CString strFilePath) { }; wcstombs(szFile, strFilePa ...

  7. ArrayList与List<T>笔记

    ArrayList与List<T>笔记 ArrayList是在System.Collections命名空间的一个类, 通过Add的方法添加一个项, 当进到这个类的元数据时, 可以看到这个方 ...

  8. 弹出层小插件之(二) layer&layui

    其实layer或者layui相对于上次所说的 sweetalert来说不仅仅有弹出层,它有很多的功能,这也大大的提高了我们的开发效率,根据我们项目的实际需要的效果进行选择.下面介绍下Layer的用法吧 ...

  9. hdu 3072 Intelligence System(Tarjan 求连通块间最小值)

    Intelligence System Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) ...

  10. 自己写的一个delphi正整数快速排序

    type   TIntArr= array of word; procedure MyQSort(var arr: TIntArr; low: word; high: word); //word可以改 ...