Comme pour mon application desktop, j’ai dû trouver une solution pour créer une fonction de copie lors d’un drag-and-drop lorsqu’on maintient la touche CTRL. Dans mon application réalisée en Blazor Server, le composant est complexe et il est créé via le RenderTreeBuilder. Voici le résultat :
Donner le focus à la DIV avec tabIndex
Ici chaque tâche du planning est une balise DIV. Ainsi la chose à ne pas oublier d’ajoute l’attribut TabIndex à notre balise DIV. Sans ça, aucun résultat ! :
Ce qui donnera avec RenderTreeBuilder :
Paramètres de notre composant
Capturer les évènements de saisies clavier est finalement simple. Nous avons à notre disposition des 3 évènements classé dans l’ordre :
- onkeydown
- onkeypress
- onkeyup
⚠ Mais attention, dans mon cas j’ai besoin de détecter que la touche CONTROL soit enfoncée. Et l’évènement onkeypress n’est pas déclenché pour toutes les touches comme celle qui m’intéresse (aussi ALT, SHIFT, et ESC). Il convient alors d’utiliser l’évènement onkeydown.
Je vais donc ajouter ces deux paramètres à mon composant :
public EventCallback OnKeyDown { get; set; }
[Parameter]
public EventCallback OnKeyUp { get; set; }
Vous remarquerez que j’ai choisi de retourner un booléen sur OnKeyDown ; En effet dans mon cas, je veux savoir si CTRL est enfoncé. Maintenant il me reste plus qu’à attacher à ma balise DIV les évènements onkeydown et onkeyup pour capturer les touches du clavier. Avec l’argument KeyboardEventArg nous pourrons regarder quelle touche est saisie :
builder.AddAttribute(++subseq, "onkeydown",
EventCallback.Factory.Create(
this, TaskOnKeyDown
)
);
builder.AddAttribute(++subseq, "onkeyup",
EventCallback.Factory.Create(
this, TaskOnKeyUp
)
);
Et pour déclencher l’évènement :
{
await OnKeyDown.InvokeAsync(args.CtrlKey);
}
Ici dans mon cas, je reçois un boolean m’indiquant si CTRL est enfoncé. Je vous invite à regarder ce que peut retourner KeyboardEventArgs car il y a des choses intéressante comme :
- key (la touche)
- ShiftKey (boolean)
- AltKey (boolean)
- …
Et bien sûr cela donne le résultat de touches combinées comme ici où j’appuie sur SHIFT+F :
