`
sisi1984117
  • 浏览: 158666 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

【转】JavaScript设置网页快捷键

阅读更多

 http://www.cnblogs.com/sunrack/archive/2010/01/15/1648787.html

 

   

这样的功能是用JavaScript中的event属性的KeyCode方法完成,利用onKeyDown事件进行驱动。
  在JavaScript中,可以通过keyCode属性来得到用户所按键的ASSCII码值。具体对应关系可以查ASSCII码表。
例子:

CODE: [Copy to clipboard]

<SCRIPT LANGUAGE="JavaScript">
<!--
function hotkey()
{
var a=window.event.keyCode;
if(a==65)
{
alert("你按了a键吧");
}
}// end hotkey
document.onkeydown = hotkey; //当onkeydown 事件发生时调用hotkey函数
//-->
</SCRIPT>


  另外,在快捷键的使用中,Alt、Ctrl、shift等辅助键也是经常用到的,可以通过altKey、ctrlKey、shiftKey这三个属性来判断Alt、Ctrl、shift键的状态
比如event.ctrlKey的值为真,就说明用户按下了Ctrl键。
例子:

CODE: [Copy to clipboard]

<SCRIPT LANGUAGE="JavaScript">
<!--
function hotkey()
{
if(event.ctrlKey)
{
alert("你按了Ctrl键吧");
}
}// end hotkey
document.onkeydown = hotkey; //当onkeydown 事件发生时调用hotkey函数
//-->
</SCRIPT>


  可以组合起来,形成真正的快捷键,将执行语句换为你要的效果就可以了。

CODE: [Copy to clipboard]

<SCRIPT LANGUAGE="JavaScript">
<!--
function hotkey()
{
var a=window.event.keyCode;
if((a==65)&&(event.ctrlKey))
{
alert("你按了ctrl+a键吧");
}
}// end hotkey
document.onkeydown = hotkey; //当onkeydown 事件发生时调用hotkey函数
//-->
</SCRIPT>


  document.onkeydown = hotkey 语句是在全页面中,当用户按下键时,调用hotkey函数,也许你希望在页面局部实现快捷键功能,那么,你可以仿照下面这样做(记得删除"document.onkeydown = hotkey"语句):

CODE: [Copy to clipboard]

<textarea rows="7" cols="90" name="message" onKeyDown="javascript: hotkey();" tabindex="2"></textarea>


  这样,只有当光标焦点在文本框中才能使用快捷键。

分享到:
评论

相关推荐

    JavaScript+快捷键设置

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

    js设置快捷键

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

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

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

    js快捷键设置

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

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

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

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

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

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

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

    火狐浏览器快捷键

    当需要快速关闭当前浏览的网页时,`Shift+F4`是一个非常实用的快捷键。它比手动点击关闭按钮更加高效,尤其在处理多个标签页时,能够显著提高操作速度。 ### 6. Ctrl+U:查看页面源代码 `Ctrl+U`命令可以让用户...

    JavaScript精彩网页特效实例精粹

    同时,通过监听键盘事件,可以实现快捷键操作,增强网页的可访问性和效率。这部分内容对于提升网页的交互性和用户体验至关重要。 这些实例不仅提供了丰富的学习材料,同时也鼓励实践和创新。通过深入理解和应用这些...

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

    在网页应用中,通过JavaScript实现快捷键功能,可以让用户无需鼠标就能进行各种操作,从而提供更加流畅的交互体验。 这个"客户端快捷键管理类库"提供了一种结构化的方式来注册、管理和处理快捷键。它允许开发者定义...

    Js快捷键开源代码

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

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

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

    Dreamweaver注释怎么设置快捷键?

    7. 设置完成后,点击“确定”(OK)按钮保存你的快捷键设置。 一旦设置完毕,当你在Dreamweaver中编写代码时,只需按下你设定的快捷键(如Ctrl + Alt + ,),就能快速插入HTML注释。同样的方法也可以用于设置CSS和...

    javascript写的网页小助手

    JavaScript编写的网页小助手是一个利用该编程语言特性实现的实用工具,主要针对网页交互和用户体验进行优化。在本文中,我们将深入探讨JavaScript的基础知识、网页助手的实现原理以及如何通过源码学习和改进这个项目...

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

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

    jquery快捷键插件mapkey

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

    firefox 快捷键

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

    Chrome快捷键

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

Global site tag (gtag.js) - Google Analytics