我们希望能用快捷键代替鼠标点击做一些事情,例如一个典型的应用就是论坛上常用的Ctrl + Enter 快捷发帖子。就以Ctrl+Enter快捷发帖子为例,实质上呢,就是通过JS脚本,捕获系统的onkeyup事件,判断event.ctrlKey是否为true并且event.keyCode为13,如果满足这个条件,那么就调用按钮对象的click()方法,等同于用鼠标去点击按钮。写个简单的示例代码:
<html>
<head>
<title> 快捷键提交示例代码</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="author" content="宝玉" />
<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, 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>
分享到:
相关推荐
网页快捷键管理js辅助类库。能方便的管理快捷键。内有实例。js代码有说明
屏蔽Alt+F4等快捷键: 代码如下:[removed] function KeyDown(){ //屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 //alert(“ASCII代码是:”+event.keyCode); if ((window.event.altKey)&& ((window....
html网页中js快捷键,使用及类库js-hotkeys
用户可以在网页上设置多个快捷键组合,当按下这些组合时,会触发相应的事件或执行特定的操作。 能做到什么: 1. 提高交互性:通过组合快捷键,用户可以更快速地执行常用操作,提高了网页的交互性。 2. 简化操作流程...
dreamweaver软件开发前端的快捷键,你可以使用这些快捷键进行快速的操作,进而快速制作网页,网页制作需要你有html,css,js等前端语言的基础
网页标题笔记脚本js插件是由作者You!分享的一个浏览器扩展插件。通过本脚本,将选中文字添加到网页标题最前面,以便在浏览器标签栏快速识别。 快捷键: Ctrl `(反引号,大键盘区数字键1左边):添加到网页标题最...
一般浏览器的开发者窗口都可以通过在当前网页界面按F12快捷键调出,然后在上面的标签栏找到Console点击就是控制台窗口,在这里可以直接执行JavaScript代码,而chrome系浏览器的控制台界面可以使用快捷键Ctrl+Shift+J...
js 特效 html 特效 快速展开的下拉菜单 js 特效 html 特效 快速展开的下拉菜单
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件(如:`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作) HTML5期末考核大作业...
Web Calendar ver 3.0 是综合 JavaScript DHTML HTML CSS 的产品,且封装在 WebCalendar 实例中,调用与设置都非常方便 Web Calendar ver 3.0 新加的功能: 1.对日历控件的对象式编程 2.对不同浏览器的兼容 3...
12.5.2 更改快捷键设置 248 12.6 操作的撤消与重复 249 本章小结 250 思考题 250 第13章 Fireworks 8制作实例 251 13.1 制作环绕文字 251 13.2 文字蒙盖图像 252 13.3 制作网页按钮 254 13.4 绘制QQ企鹅卡通...
掌握其快捷键设置等技巧,可快速提高开发调试效率。 精通阶段: 前端框架:学习前端框架,例如jQuery、Vue、React等。 前端框架:学习前端框架,例如Vue、React等。 网页性能优化:学习如何优化网页性能,例如减少...
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件(如:`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作) HTML5期末考核大作业...
WebMark是一款chrome内核浏览器扩展,选中网页中的文字按下快捷键可以进行颜色、背景、下划线的设置,方便网页阅读。同时可以配合印象笔记chrome扩展进行保存。 WebMark文件为源文件,WebMark.crx 为打包好的扩展。
双面浏览器 一个简单的电子应用程序,...永久设置 键盘快捷键编辑器/查看器 暂停/播放/静音的键盘快捷键 自动暂停最小化 隐藏/显示顶部导航 自定义背景色 耳机控制 发行版 更新项目的package.json文件中的版本(例如
复制我.js CopyMe.js 是一个 JavaScript 库,它使网页能够轻松监控从中复制的文本。 它可用于接收复制/剪切事件(无论是通过键盘快捷键的鼠标完成)。 这些信息可以证明是有用的——它可以帮助检测潜在的抄袭,帮助...
一般浏览器的开发者窗口都可以通过在当前网页界面按F12快捷键调出,然后在上面的标签栏找到Console点击就是控制台窗口,在这里可以直接执行JavaScript代码,而chrome系浏览器的控制台界面可以使用快捷键Ctrl+Shift+J...
触摸屏网页全屏浏览器V1.0 中国WEB技术联盟 核心技术小组组长Grearo代写各类功能小软件,大型软件工程...已经禁止了右键菜单,JS脚本报错,IE快捷键; 关闭方法:使用TAB+ALT,切换到主窗口(非浏览器窗口),关闭程序。