马蹄室内设计网站,郴州文明网网站,企业网网页,企业网站如何做seo╭┈┈╮ ╭┈┈╮ ╭┈┈╮
┆ ├┈┈..┈┈┈┈┈.┆ └┈╮┆ ├┈┈..┈┈┈┈┈..┈┈.┈┈..┈┈┈┈┈.
┆ ┆┆ □ ┆┆ ┈┤┆ ┆ -__┘┆ ┆ ┆┆__ ┈┈┤
╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈┈╯╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰… ╭┈┈╮ ╭┈┈╮ ╭┈┈╮
┆ ├┈┈..┈┈┈┈┈.┆ └┈╮┆ ├┈┈..┈┈┈┈┈..┈┈.┈┈..┈┈┈┈┈.
┆ ┆┆ □ ┆┆ ┈┤┆ ┆ -__┘┆ ┆ ┆┆__ ┈┈┤
╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈┈╯╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈ ┆╰┈┈┈┈┈╯╰┈┈┈┈┈╯ 创建 您将需要在您的系统上安装的 Node.js。 # bower 安装
$ bower install hotkeysjs# npm 安装
$ npm install hotkeys-js$ npm run build # 编译
$ npm run watch # 开发模式 使用 传统调用 script typetext/javascript src./js/hotkeys.js/script 包加载 import hotkeys from hotkeys-js;hotkeys(shifta,altd, w, function(e){console.log(干点活儿,e);if(hotkeys.shift) console.log(大哥你摁下了 shift 键);if(hotkeys.ctrl) console.log(大哥你摁下了 ctrl 键);if(hotkeys.alt) console.log(大哥你摁下了 alt 键);
}); 定义快捷键 // 定义 F5 快捷键
hotkeys(f5, function(event,handler){//event.srcElement: input //event.target: input// 阻止Widnows系统下的默认刷新事件event.preventDefault() alert(你按下了 F5 键!)
});
// 定义a快捷键
hotkeys(a, function(event,handler){//event.srcElement: input //event.target: inputif(event.target input){alert(你在输入框中按下了 a!)}alert(你按下了 a!)
});// 定义a快捷键
hotkeys(ctrla,ctrlb,r,f, function(event,handler){switch(handler.key){case ctrla:alert(你按下了ctrla!);break;case ctrlb:alert(你按下了ctrlb!);break;case r:alert(你按下了r!);break;case f:alert(你按下了f!);break;}//handler.scope 范围
});// 返回false将停止活动并阻止默认浏览器事件
hotkeys(ctrlr, function(){ alert(停止刷新!); return false });// 多个快捷方式做同样的事情
hotkeys(⌘r, ctrlr, 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(shifta,altd, 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(ctrlo, ctrlaltenter, scope1, function(){console.log(你好看);
});hotkeys(ctrlo, enter, scope2, function(){ console.log(你好丑陋啊);
});// 你摁 “ctrlo”组合键
// 当scope等于 scope1 执行 回调事件打印出 “你好看”
// 当scope等于 scope2 执行 回调事件打印出 “你好丑陋啊”// 通过setScope设定范围scope
hotkeys.setScope(scope1); // 默认所有事儿都干哦 标记快捷键范围 删除 区域范围标记 hotkeys.deleteScope(scope1); 获取 区域范围标记 hotkeys.getScope(); 设置 区域范围标记 hotkeys.setScope(scope1); 解除绑定 hotkeys.unbind(ctrlo, ctrlaltenter) 解除绑定两组快捷键hotkeys.unbind(ctrlo,files) 解除绑定名字叫files钟的一组快捷键 键判断 判断摁下的键是否为某个键 hotkeys(a, function(){console.log(hotkeys.isPressed(a)); // trueconsole.log(hotkeys.isPressed(A)); // trueconsole.log(hotkeys.isPressed(65)); // true
}); 获取摁下键值 获取摁下绑定键的键值 hotkeys.getPressedKeyCodes() hotkeys(commandctrlshifta,f, function(){console.log(hotkeys.getPressedKeyCodes()); // [17, 65] 或者 [70]
}) 过滤 INPUT SELECT TEXTAREA 默认不处理。hotkeys.filter 返回 true 快捷键设置才会起作用false 快捷键设置失效。 hotkeys.filter function(event){return true;
}
// 如何增加过滤可编辑标签 div contentEditabletrue/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 React中使用 react-hotkeys安装如下 npm i -S react-hot-keys 例子 import React, { Component } from react;
import Hotkeys from react-hot-keys;export default class HotkeysDemo extends Component {constructor(props) {super(props);this.state {output: Hello, I am a component that listens to keydown and keyup of a,}}onKeyUp(keyName, e, handle) {console.log(test:onKeyUp, e, handle)this.setState({ output: onKeyUp ${keyName} });}onKeyDown(keyName, e, handle) {console.log(test:onKeyDown, keyName, e, handle)this.setState({ output: onKeyDown ${keyName} });}render() {return (Hotkeys keyNameshifta,alts onKeyDown{this.onKeyDown.bind(this)}onKeyUp{this.onKeyUp.bind(this)}div style{{ padding: 50px }} {this.state.output} /div/Hotkeys)}
} 转载于:https://www.cnblogs.com/wcjiang/p/8658064.html
