js简单的设置快捷键,hotkeys捕获键盘键和组合键的输入
来源:互联网 发布:上海知名欧美外企 知乎 编辑:程序博客网 时间:2024/05/20 06:31
设置快捷键
这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键,它没有依赖,压缩只有只有(~3kb)。
hotkeys on Github:https://github.com/jaywcjlove/hotkeys
hotkeys预览:http://jaywcjlove.github.io/hotkeys/
__ __ __ | |--..-----.| |_ | |--..-----..--.--..-----. | || _ || _|| < | -__|| | ||__ --| |__|__||_____||____||__|__||_____||___ ||_____| |_____|
创建
您将需要在您的系统上安装的 Node.js。
# bower 安装$ bower install hotkeysjs# npm 安装$ npm install hotkeys-js# 在页面上引用需要压缩的话,运行$ grunt dist# 在dist目录中生成下列文件:# dist/hotkeys.js# dist/hotkeys.min.js# dist/hotkeys.min.map
定义快捷键
// 定义a快捷键hotkeys('a', function(event,handler){ //event.srcElement: input //event.target: input if(event.target === "input"){ alert('你在输入框中按下了 a!') } alert('你按下了 a!') });// 定义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; } //handler.scope 范围});// 返回false将停止活动,并阻止默认浏览器事件hotkeys('ctrl+r', function(){ alert('停止刷新!'); return false });// 多个快捷方式做同样的事情hotkeys('⌘+r, ctrl+r', function(){ });// 对所有摁键执行任务hotkeys('*','wcj', function(e){ console.log('干点活儿',e); console.log("key.getScope()::",hotkeys.getScope()); if(hotkeys.shift) console.log('大哥你摁下了 shift 键!'); if(hotkeys.ctrl) console.log('大哥你摁下了 ctrl 键!'); if(hotkeys.alt) console.log('大哥你摁下了 alt 键!');});
支持的键
⇧
, shift
, option
, ⌥
, alt
, ctrl
, control
, command
, ⌘
。
⌘
Command() ⌃
Control ⌥
Option(alt) ⇧
Shift ⇪
Caps Lock(大写) fn
功能键就是fn(不支持) ↩︎
return/Enterspace
空格键
修饰键判断
可以对下面的修饰键判断 shift
alt
option
ctrl
control
command
hotkeys('shift+a,alt+d, w', function(e){ console.log('干点活儿',e); if(hotkeys.shift) console.log('大哥你摁下了 shift 键!'); if(hotkeys.ctrl) console.log('大哥你摁下了 ctrl 键!'); if(hotkeys.alt) console.log('大哥你摁下了 alt 键!');});
切换快捷键
如果在单页面在不同的区域,相同的快捷键,干不同的事儿,之间来回切换。O(∩_∩)O !
// 一个快捷键,有可能干的活儿不一样哦hotkeys('ctrl+o, ctrl+alt+enter', 'issues', function(){ console.log('干点活儿');});hotkeys('o, enter', 'files', function(){ console.log('另一种活儿');});// 设定范围scope hotkeys.setScope('issues'); // 默认所有事儿都干哦
删除标记快捷键
删除区域范围标记
hotkeys.deleteScope('issues');
解除绑定
hotkeys.unbind("ctrl+o, ctrl+alt+enter")
解除绑定两组快捷键 hotkeys.unbind("ctrl+o","files")
解除绑定名字叫files钟的一组快捷键
键判断
判断摁下的键是否为某个键
hotkeys('a', function(){ console.log(hotkeys.isPressed("A")); //=> true console.log(hotkeys.isPressed(65)); //=> true});
获取摁下键值
获取摁下绑定键的键值 hotkeys.getPressedKeyCodes()
hotkeys('command+ctrl+shift+a,f', function(){ console.log(hotkeys.getPressedKeyCodes()); //=> [17, 65] 或者 [70]})
过滤
INPUT
SELECT
TEXTAREA
默认不处理。 hotkeys.filter
返回 true
快捷键设置才会起作用,flase
快捷键设置失效。
hotkeys.filter = function(event){ return true;}//如何增加过滤可编辑标签 <div contentEditable="true"></div>//contentEditable老浏览器不支持滴 hotkeys.filter = function(event) { var tagName = (event.target || event.srcElement).tagName; return !(tagName.isContentEditable || tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA');}//hotkeys.filter = function(event){ var tagName = (event.target || event.srcElement).tagName; hotkeys.setScope(/^(INPUT|TEXTAREA|SELECT)$/.test(tagName) ? 'input' : 'other'); return true;}
兼容模式
var k = hotkeys.noConflict();k('a', function() { console.log("这里可以干一些事儿")});hotkeys()// -->Uncaught TypeError: hotkeys is not a function(anonymous function) // @ VM2170:2InjectedScript._evaluateOn // @ VM2165:883InjectedScript._evaluateAndWrap // @ VM2165:816InjectedScript.evaluate @ VM2165:682
0 0
- js简单的设置快捷键,hotkeys捕获键盘键和组合键的输入
- js简单的设置快捷键,hotkeys捕获键盘键和组合键的输入
- 使用Mousetrap处理键盘快捷键(keypress.js和jQuery.hotkeys.js的使用)
- Qt之 捕获键盘的组合键
- 捕获组合键 键盘组合键
- js组合键和单个键盘事件
- 使用JS监听键盘两个组合键触发的事件
- JS监听键盘两个组合键触发的事件
- 使用JS监听键盘两个组合键触发的事件
- 使用JS监听键盘两个组合键触发的事件
- js,jq监听键盘的组合键事件
- 使用JS监听键盘两个组合键触发的事件
- 苹果电脑的快捷键和组合键介绍
- 电脑键盘快捷键和组合键功能使用大全
- 键盘设置组合键调用JS方法,例如,Ctrl+Q ,键盘键操作JS函数
- java swing 菜单栏 JMenuItem 设置快捷键的组合键
- 鼠标和键盘的事件捕获增强
- 捕获鼠标和键盘的原始数据
- myeclipse中如何设置字体
- android 初识mvp
- java try、catch、finally及finally执行顺序详解
- LisView、GridView、RecyclerView的高度wrap_content
- 【怎样使用 GitHub?】Fadeoc Khaos的回答
- js简单的设置快捷键,hotkeys捕获键盘键和组合键的输入
- eclipse注释里插入当前系统时间
- Notification中PendingInten…
- Notepad++如何设置行高
- android genymotion模拟器怎么使用以及和google提供的模拟器性能对比
- error connection refused
- 如何让myeclipse自动提示内容
- Java中int和String互相转换的多种…
- 同平台升级 oracle 10 到 oracle11g的一些考虑和实际操作