我的想法是在做仓库管理方面的FIORI APP,特别是WM方面的功能时,需要使到RF设备,手持设备,这样操作时为了操作方便快捷,会需要使用键盘快捷键,例如:使用TAB标签页,向下/向上翻页,箭头按钮,F1,F2,CART+,ALT+等,所以在网络上收集整理了一些相关的资料,现先收集了解一下,方便使用到时查找,但我没有实际验证使用。
1.业务需求
以下以实现如下业务需求为例子说明开发SAPUI5 的过程。
- 使用Alt +功能键组合快速关注过滤器栏搜索字段,例如:Alt + F1
- 单击F8键发布文档-我们有一个发布按钮,但单击F8键,则应该发布文档。
- 可以提供更多选项,例如选项卡栏导航(使用功能键组合更改选定的选项卡)等。
2.1.创建热键接口JS
在项目的WEBAPP 目录下建立util.hotkeyInterface.js文件

并定入如下JS代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
sap.ui.define([ "sap/ui/base/Object" ], function(ui5Object) { "use strict"; var HotkeyInterface = ui5Object.extend("sap.test.listreport.util.hotkeyInterface", { constructor: function() { // Nothing }, bindHotKeys: function(combinations) { // remove the old key combinations that are buffered if(this.tempCombinations){ this.tempCombinations.forEach(function(mItem) { this.unBindHotKey(mItem.keyCombination); }, this); } // Buffer the combinations for removing later this.tempCombinations = combinations; combinations.forEach(function(mItem) { // Now call the actual binding this.bindHotKey(mItem.keyCombination, mItem.control, mItem.fnHandler, mItem.hanlder); }, this); }, bindHotKey: function(keyCombination, control, fnHandler, hanlder) { $(document).bind("keydown." + this.getNameSpace(keyCombination), keyCombination, function(oEvent) { if (control && control.getDomRef() && control.getDomRef().getBoundingClientRect()) { // Check if the control is visible in DOM currently, // sometimes,the control might be hidden becuase of a tab change or view change var aMargin = control.getDomRef().getBoundingClientRect(); if (aMargin.width) {// If the width is availble, then it is visible fnHandler.call(this, oEvent, control); } } }.bind(hanlder)); }, unBindHotKeys: function(keyCombinations) { // Remove the hotkeys keyCombinations.forEach(function(mItem) { this.unBindHotKey(mItem.keyCombination); }, this); }, unBindHotKey: function(keyCombination) { $(document).unbind("keydown." + this.getNameSpace(keyCombination)); }, getNameSpace: function(keyCombination) { // Create a unique key for the hotkey we are using return "pocApplication_" + keyCombination.replace("+", "_"); } }); return { getInstance: function() { // Singleton if (!this.instance) { this.instance = new HotkeyInterface(); } return this.instance; } }; }); |
在清单文件manifest.json中包含util/hotkeyInterface.js这个API:

3.在页面的JS中使用热键
我们的视图控制器中引入API:

在Init方法中,创建一个具有热键和事件处理程序方法的对象:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//热键 this.hotKeyHanlders = [{ keyCombination: "F3", control: this.getView().byId("searchField"), fnHandler: this.focusOnSearchFields, hanlder: this }, { keyCombination: "F8", control: this.getView().byId("gr_migo"), fnHandler: this.handleHotKeyPost, hanlder: this } ]; //现在实例化API并注册我们的热键: hotkeyInterface.getInstance().bindHotKeys(this.hotKeyHanlders);//注册热键: |
在JS中注册事务:
1 2 3 4 5 6 7 8 9 |
focusOnSearchFields: function(oEvent, oControl) { oEvent.preventDefault(); oControl.focus(); }, handleHotKeyPost: function(oEvent, oControl) { oEvent.preventDefault(); oControl.firePress(); }, |
对于取消绑定热键,我们也可以单独取消绑定热键。将在onexit事件中完成。
1 2 3 |
unBindAllHotKeys: function() { hotkeyInterface.getInstance().unBindHotKeys(this.hotKeyHanlders); }, |
我们已经实例化了热键API,并使用事件处理函数注册了热键。
加载Fiori应用程序后,按上述功能键组合,将触发相应的事件处理程序。
注意:分配热键时要小心,通过我提到的插件URL,存在一些限制,因为在少数情况下,浏览器快捷方式的优先级高于我们分配的快捷方式。
4.问题
我测试了一下,还是有些问题,
- 1.在运行时,发现任何按键操作都会触发所有的下定义了的函数过程,并不只是定义的那个快捷键,虽然我们,这个可应该可以有函数中通过oEvent.data = oEvent.key来判断,oEvent.key中才是真正的按键。
- 2.发现启动此快捷键功能后,屏幕上的输入都不起作用了,就是说我在输入框中,输入值,也会触发快捷键功能,而不是输入值,
- 所以我觉得应该是基础接口类有些问题,上面两个其实都是不能准确判断的设置的快捷键的原因,
原文地址https://blogs.sap.com/2017/06/14/hotkeys-keyboard-shortcuts-in-sap-ui5-using-open-source-plugin/
5.修正
我修改了一下hotkeyInterface.js,这样时可以正常判断到快捷键了,但组合键还是有问题,应该是其中的$(document).bind(“keydown.”中的keydown引起的,所以我修改为keyup,keypress,但测试发现直接就不会触发了,但学是觉得应该是这里的问题,后面在试试,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
sap.ui.define([ "sap/ui/base/Object" ], function(ui5Object) { "use strict"; var HotkeyInterface = ui5Object.extend("zsap.mm.migo.util.hotkeyInterface", { constructor: function() { // Nothing }, bindHotKeys: function(combinations) { // remove the old key combinations that are buffered if(this.tempCombinations){ this.tempCombinations.forEach(function(mItem) { this.unBindHotKey(mItem.keyCombination); }, this); } // Buffer the combinations for removing later this.tempCombinations = combinations; combinations.forEach(function(mItem) { // Now call the actual binding this.bindHotKey(mItem.keyCombination, mItem.control, mItem.fnHandler, mItem.hanlder); }, this); }, bindHotKey: function(keyCombination, control, fnHandler, hanlder) { $(document).bind("keydown." + this.getNameSpace(keyCombination), keyCombination, function(oEvent) { if (control && control.getDomRef() && control.getDomRef().getBoundingClientRect() && oEvent.data === oEvent.key ) { // Check if the control is visible in DOM currently, // sometimes,the control might be hidden becuase of a tab change or view change var aMargin = control.getDomRef().getBoundingClientRect(); if (aMargin.width) {// If the width is availble, then it is visible fnHandler.call(this, oEvent, control); } } }.bind(hanlder)); }, unBindHotKeys: function(keyCombinations) { // Remove the hotkeys keyCombinations.forEach(function(mItem) { this.unBindHotKey(mItem.keyCombination); }, this); }, unBindHotKey: function(keyCombination) { $(document).unbind("keydown." + this.getNameSpace(keyCombination)); }, getNameSpace: function(keyCombination) { // Create a unique key for the hotkey we are using return "pocApplication_" + keyCombination.replace("+", "_"); } }); return { getInstance: function() { // Singleton if (!this.instance) { this.instance = new HotkeyInterface(); } return this.instance; } }; }); |