未调用 onInit 中的 SAPUI5 键

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);如果你想要一个 sinple F11，你只需要检查evt.keyCode == 122。

你可以在这里找到一个工作的小提琴：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: {}
});