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

    题面 https://www.luogu.org/problemnew/show/UVA557 这里顺便整理一下二维格点随机游走问题. 遇到这种问题时,需注意分母的计算问题. 设x为起点到终点的距离. ...

  2. Python下图片的高斯模糊化的优化

    资源下载 #本文PDF版下载 Python下图片的高斯模糊化的优化(或者单击我博客园右上角的github小标,找到lab102的W6目录下即可) #本文代码下载 高斯模糊(一维)优化代码(和本文方法集 ...

  3. 装载问题(load)

    装载问题(load) 问题描述: 有一批共n 个集装箱要装上艘载重量为c 的轮船,其中集装箱i 的重量为wi.找出一种最 优装载方案,将轮船尽可能装满,即在装载体积不受限制的情况下,将尽可能重的集装箱 ...

  4. 进程退出exit、_exit、abort

    分为正常退出,异常退出 正常退出的方法: 1.在main函数中执行return 2.调用exit函数 3.调用_exit  函数 ----------------------------------- ...

  5. sql去重；同一条数据出现多条取一条的sql语句

    理论上相同数据个别字段值不同重复问题: 1.某字段重复,其他字段值不同时,按重复字段分组只取一条的sql语句(eg:相同的数据某个字段值有差别导致存储两条或多条无意义重复数据的情况)select s. ...

  6. javascript数据结构——栈

    栈是一种高效的数据结构,数据只能在栈顶添加或删除,所以这样操作很快,也很容易实现.栈的使用遍布程序语言实现的方方面面,从表达式求值到处理函数调用.接下来,用JavaScript实现一个栈的数据结构. ...

  7. UVALIve 5987 素数

    题目链接:Distinct Primes 如果一个数.至少有三个因子是素数..那么这个数就是prime num.30和42是前两个prime num.问你第n个这种数是谁.(1<=n<=1 ...

  8. SSO-CAS单点登录

    基本概念 单点登录SSO ,是目前比较流行的企业业务整合的解决方案之一.SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统. CAS(Centeral Authenti ...

  9. Hive时间函数笔记

    unix_timestamp()函数: 返回值: bigint说明: 获得当前时区的UNIX时间戳 举例: hive> select unix_timestamp() from dual; 14 ...

  10. 无线Mesh网络技术基础与应用

    无线Mesh网络主要包含三类节点,构成了Mesh的基本服务集. 1.与有线网络相连的节点(GateWay节点),其主要负责实现无线Mesh网络和有线网络的数据交换. 2.可以进行Mesh组网并拥有Ro ...