网页中快捷键的处理办法

快捷键的使用:
两种解决办法:JS 、html
1)html标签属性 accesskey  参考:http://www.fzyr.cn/post-654.html
accesskey 属性规定激活(使元素获得焦点)元素的快捷键。
注意: 在不同操作系统中不同的浏览器中访问快捷键的方式不同:

提示: 各种浏览器下accesskey快捷键的使用方法:
IE浏览器
按住Alt键,点击accesskey定义的快捷键(焦点将移动到链接),再按回车.
FireFox浏览器
按住Alt+Shift键,点击accesskey定义的快捷键.
Chrome浏览器
按住Alt键,点击accesskey定义的快捷键.
Opera浏览器
按住Shift键,点击esc,出现本页定义的accesskey快捷键列表可供选择.
Safari浏览器
按住Alt键,点击accesskey定义的快捷键.

HTML 4.01 与 HTML5之间的差异

在 HTML5 中, accesskey 属性可用于任何 HTML 元素 (它会 验证任何HTML元素。但不一定是有用)。
在 HTML 4.01 中, accesskey 属性可使用于: <a>, <area>, <button>, <input>, <label>, <legend>, 和 <textarea>。
语法

<element accesskey="character">
属性值

值 描述
character 指定激活元素的快捷键
实例
带有指定快捷键的超链接:
<a href="http://www.w3cschool.cc/html5" accesskey="h">HTML5</a><br>
<a href="http://www.w3cschool.cc/css3" accesskey="c">CSS3</a>

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari
所有主流浏览器都支持 accesskey 属性

2)js
引入mousetrap.js插件
使用如下:(封装)
/**
 * [hot_Keys description]
 * @param  {[type]} obj     触发事件的对象
 * @param  {[type]} fastKey 快键键的设置:如'alt+s'
 * @return {[type]}         [description]
 */
function hot_Keys(obj,fastKey){
     Mousetrap.bind(fastKey, function(e) {
        obj.trigger("click");
        return false;//禁止浏览器的事件
     });
}


eg:hot_Keys(bSave,'alt+s');

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Mousetrap 是一个 JavaScript 库,用于捕获键盘快捷键。它可以用于在 Web 应用程序添加键盘快捷键,以便用户可以使用键盘来执行某些操作。 以下是一个简单的示例,演示如何使用Mousetrap 来绑定键盘快捷键: 首先,从 mousetrap 官方网站(https://craig.is/killing/mice) 下载 mousetrap.js 文件,并将其引入到你的网页。 然后,在你的 JavaScript 代码,创建一个 Mousetrap 的实例,并使用 bind() 方法来绑定一个键盘快捷键。例如,下面的代码将绑定 Ctrl+S 快捷键来保存表单: ```javascript // 创建一个 Mousetrap 实例 var mousetrap = new Mousetrap(); // 绑定 Ctrl+S 快捷键来保存表单 mousetrap.bind('ctrl+s', function(e) { // 阻止默认行为(在浏览器保存页面) e.preventDefault(); // 在这里执行保存表单的代码 }); ``` 在上面的代码,我们创建了一个 Mousetrap 实例,并使用 bind() 方法来绑定 Ctrl+S 快捷键。当用户按下 Ctrl+S 时,Mousetrap 将调用我们指定的处理程序函数,并传入一个事件对象作为参数。在处理程序函数,我们可以执行保存表单的代码。 需要注意的是,如果你想在某个特定的元素上绑定快捷键,可以将该元素传递给 bind() 方法的第二个参数。例如,下面的代码将在一个具有 ID 为 "myInput" 的文本框上绑定 Enter 键的快捷键: ```javascript // 创建一个 Mousetrap 实例 var mousetrap = new Mousetrap(); // 绑定 Enter 键的快捷键来触发提交按钮 mousetrap.bind('enter', function(e) { // 阻止默认行为(在文本框换行) e.preventDefault(); // 获取提交按钮并模拟点击 var submitBtn = document.getElementById('mySubmitBtn'); submitBtn.click(); }, 'keydown', document.getElementById('myInput')); ``` 在上面的代码,我们将一个具有 ID 为 "myInput" 的文本框传递给 bind() 方法的第二个参数,以便将快捷键绑定到该元素上。当用户在该文本框按下 Enter 键时,Mousetrap 将调用我们指定的处理程序函数,并模拟点击 ID 为 "mySubmitBtn" 的按钮。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值