未调用 onInit 中的 SAPUI5 keydown

Question

我在控制器的 onInit 中有以下代码：

   $("input").on("keydown", (
            function(evt) {
                        if (evt.keyCode == 17 && (evt.ctrlKey)) {
                                     evt.preventDefault();

                                     that.onMoveStorageBin();
                        }

我的想法是，当我按下 F11 按钮时，将执行 onMoveStorageBin 函数。但是当我按下任何按钮时它不会进入 onInit。将此按键处理的正确位置放在哪里？谢谢，蒂姆

Answer 1

您应该在 onAfterRendering 生命周期挂钩上执行您的代码片段。这是因为在 onInit 中，jQuery 调用将无法找到任何输入（因为与您的视图对应的元素尚未添加到 DOM）。

根据描述和代码，我了解到您需要检查是否按下了 F11 + CTRL（因此检查为 evt.keyCode == 122 && evt.ctrlKey）；如果你想要一个简单的 F11，你只需要检查 evt.keyCode == 122.

您可以在此处找到有效的 fiddle：https://jsfiddle.net/8kcs8xch/4/

 onAfterRendering: function() {
   jQuery("input").on("keydown",
     function(evt) {
       if (evt.keyCode == 122 && evt.ctrlKey) {
         evt.preventDefault();
         sap.m.MessageToast.show('Alert');
       }
     });
 }

此方法具有以下局限性：

它直接使用 DOM 并对 UI5 控件的呈现方式做出假设。
它将侦听器应用于所有个现有输入。您也可以通过使用其他选择器（例如 CSS）来解决这个问题。

一个更好的解决方案是创建一个包含此事件的自定义控件。你可以在这里找到一个例子：https://jsfiddle.net/8kcs8xch/3/

基本上您需要通过在新控件中声明 DOM 处理程序来监听 keydown 事件。然后，您可以根据此 DOM 事件定义一个自定义 UI5 事件（我只是将其称为 alert）：

var CustomInput = sap.m.Input.extend("CustomInput", {
   metadata: {
     events: {alert: {}}
   },
   onkeydown: function(evt) {
     if (evt.keyCode == 122 && evt.ctrlKey) {
       // only prevent the default of the DOM event if the
       // UI5 event's preventDefault is called as well.
       if (!this.fireEvent("alert", {}, true)) {
           evt.preventDefault();
       }
     }
   },
   renderer: {}
});

未调用 onInit 中的 SAPUI5 keydown

SAPUI5 keydown in onInit not called

sapui5

onkeydown