`

JS 网页快捷键设置

 
阅读更多

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

 

分享到：
| CAS原理图
评论
1 楼 jaywcjlove 2015-10-06  
http://jaywcjlove.github.io/hotkeys/

hotkeys :快捷键设置，没有依赖。


hotkeys('a', function(event,handler){
    //event.srcElement: input 
    //event.target: input
    if(event.target === "input"){
        alert('你在输入框中按下了 a!')
    }
    alert('你按下了 a!') 
});

hotkeys('ctrl+a,ctrl+b,r,f', function(event,handler){
    switch(handler.key){
        case "ctrl+a":alert('你按下了ctrl+a!');break;
        case "ctrl+b":alert('你按下了ctrl+b!');break;
        case "r":alert('你按下了r!');break;
        case "f":alert('你按下了f!');break;
    }
});
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js快捷键设置

    JavaScript（简称JS）是一种轻量级的脚本语言，广泛应用于网页和网络应用开发，能够对用户交互、页面动态更新以及Ajax异步通信等进行处理。快捷键设置在编程过程中可以显著提高开发效率，帮助程序员快速执行常见的...

    JavaScript+快捷键设置

    ### JavaScript与快捷键设置知识点详解 #### 一、概述 在网页开发中，为了提高用户体验以及增加网页的安全性，开发者常常会使用JavaScript来控制或监听用户的键盘操作，比如禁用某些快捷键的功能或者添加自定义...

    js设置快捷键

    同时，还可以为同一快捷键设置多个事件类型，如'keyup'、'keydown'，以及'keypress'。 对于更复杂的场景，你可能需要解除已注册的快捷键。这可以通过`hotkeys.remove`方法实现： ```javascript var handler = ...

    Js快捷键开源代码

    JavaScript（Js）是一种广泛用于网页和网络应用开发的脚本语言，它在浏览器环境中运行，为用户界面提供交互性。快捷键（Hotkeys）是提高用户界面效率的关键元素，允许用户通过键盘组合快速执行特定操作，而无需使用...

    js前端实现的组合快捷键demo（类似QQ截图快捷键等）

    用户可以在网页上设置多个快捷键组合，当按下这些组合时，会触发相应的事件或执行特定的操作。 能做到什么： 1. 提高交互性：通过组合快捷键，用户可以更快速地执行常用操作，提高了网页的交互性。 2. 简化操作流程...

    客户端快捷键管理类库(js)

    这个名为"js"的类库专注于快捷键的管理和控制，使得开发者能够轻松地为他们的网页应用程序添加自定义快捷键功能。下面我们将深入探讨这个类库的核心特性、使用方法以及如何通过提供的"keyControlDemo"示例来理解和...

    火狐浏览器快捷键

    这里不仅可以看到JavaScript错误和警告信息，还可以执行简单的JS代码测试，是调试脚本错误的有效手段。 ### 8. Ctrl+Shift+P：调用命令面板 通过`Ctrl+Shift+P`，火狐浏览器会显示一个命令面板，用户可以输入命令...

    js-hotkeys(html js 快捷键)

    JavaScript（简称JS）是网页开发中的重要脚本语言，它能为HTML页面添加交互性和动态功能。在HTML中实现快捷键功能，可以让用户通过键盘快速触发特定操作，提高用户体验。"js-hotkeys"是一个JavaScript库，专门用于在...

    asp.net 设置应用程序的快捷键

    如果你的应用需要支持多语言，可以将快捷键设置在资源文件中，这样可以根据用户的语言选择显示相应的快捷键提示。 5. **测试与优化**： 快捷键的可用性和用户体验是关键，需要充分测试不同场景下的快捷键行为，...

    js keycode快捷键大全 并附有简单使用说明

    总结来说，了解并运用好JavaScript中的keycode值，可以让我们更好地处理键盘事件，丰富网页应用的交互性。对于开发者而言，掌握这些keycode值及其使用方法是非常基础且重要的。在实际开发过程中，参考keycode大全表...

    你不得不知道的ie11浏览器快捷键技巧.docx

    在日常的网页浏览中，IE11浏览器的快捷键技巧能极大地提高我们的工作效率，节省时间。下面我们将详细探讨这些快捷键的使用方法及其优势。 1. **常规快捷组合键**： - `Ctrl + T`：新建标签页，快速打开新的网页。 ...

    javascript经典特效---快捷键提交按钮.rar

    JavaScript是一种广泛用于网页和网络应用的脚本语言，它主要负责处理客户端（浏览器端）的动态行为。通过JavaScript，开发者可以实现用户交互、数据验证、页面更新等功能，而无需服务器的介入。 在本例中，"快捷键...

    如何禁用一些快捷键？怎么禁用快捷键？

    例如，在网页开发中，有时候我们需要禁用某些默认的快捷键行为，如Ctrl+N、Ctrl+R、Shift+F10等，以避免干扰用户的正常使用流程。本文将详细介绍如何通过JavaScript实现这一功能，并提供一个具体的代码示例。 #### ...

    jquery快捷键插件mapkey

    5. **冲突处理**：插件内置冲突检测机制，当快捷键设置有冲突时，可以进行适当的处理，避免影响用户体验。 ### 三、使用步骤 1. **引入jQuery库**：首先确保页面已经引入了jQuery库，可以通过CDN或者本地文件引用...

    js实现ctrl+s保存快捷键 ie6 7 8

    js实现ctrl+s保存快捷键 ie6 7 8

    javascript onkeydown实现键盘快捷键控制页面.docx

    - **JavaScript 快捷键设置实现代码**：针对 Web 开发者，可以进一步探索如何在网页中设置更多复杂的快捷键功能。 #### 8. 总结 通过使用 `onkeydown` 事件，可以轻松地为网页添加键盘快捷键功能，极大地提升了...

    firefox 快捷键

    1. 关闭标签页：`command + W` 这个快捷键可以快速关闭当前活动的标签页，方便用户在多个网页之间切换。 2. 关闭窗口：`command + shift + W` 如果你想要关闭整个Firefox窗口，包括所有打开的标签页，这个组合键...

    Chrome快捷键

    在高效的网页浏览中，熟练掌握浏览器的快捷键可以显著提升工作效率。Google Chrome作为世界上最流行的浏览器之一，提供了丰富的快捷键功能，帮助用户快速执行各种操作。本篇文章将详细解读Chrome浏览器中的快捷键...

Magicbox
Global site tag (gtag.js) - Google Analytics