SAPUI5 keydown dans onInit pas appelé

Question

J'ai dans mon onInit dans le contrôleur code suivant:

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

            that.onMoveStorageBin(); 
         } 

Alors idée est, quand j'appuyez sur la touche F11, la fonction onMoveStorageBin serait exécutée. Mais il ne va pas dans l'onInit quand j'appuie sur n'importe quel bouton. Où est le bon endroit pour mettre cette manipulation du clavier? Merci, Tim

Answer 1

Vous devez exécuter votre extrait de code sur le hook de cycle de vie onAfterRendering. En effet, dans l'onInit, l'appel jQuery ne pourra pas trouver d'entrée (car les éléments correspondant à votre vue n'ont pas encore été ajoutés au DOM). En fonction de la description et du code, je comprends que vous devez vérifier si la touche F11 + CTRL a été enfoncée (par conséquent, la vérification est evt.keyCode == 122 && evt.ctrlKey); Si vous voulez un F11 sinple, il vous suffit de vérifier evt.keyCode == 122.

Vous pouvez trouver un violon de travail ici: 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'); 
     } 
    }); 
} 

Cette approche présente les limites suivantes:

• Il utilise les DOM directement et fait des hypothèses sur la façon dont les contrôles UI5 sont rendus.
• Il applique l'écouteur sur ALL entrées existantes. Vous pouvez le faire en utilisant d'autres sélecteurs (par exemple CSS).

Une solution considérablement meilleure serait de créer un contrôle personnalisé qui a cet événement. Vous pouvez trouver un exemple ici: https://jsfiddle.net/8kcs8xch/3/

Fondamentalement, vous devez écouter l'événement keydown en déclarant un gestionnaire DOM dans votre nouveau contrôle. Vous pouvez alors définir un événement UI5 personnalisé (je l'appelais simplement alert) basé sur cet événement DOM:

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: {} 
});