careers onkeydown, onkeyup avec Blazor RenderTreeBuilder - Blog of Christophe Peugnet
advertise
tools
tour
about
30 novembre 2020

onkeydown, onkeyup avec Blazor RenderTreeBuilder

careers
advertise
tools

Comme pour mon application desktop, j’ai eu 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 ! :

<div tabindex="1">...</div>

Ce qui donnera avec RenderTreeBuilder :

builder.AddAttribute(++subseq, "tabindex", subseq);

 

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 :

[Parameter]
public EventCallback<bool> OnKeyDown { get; set; }
[Parameter]
public EventCallback<string> 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 :

[Parameter]
builder.AddAttribute(++subseq, "onkeydown",
   EventCallback.Factory.Create<KeyboardEventArgs>(
      this, TaskOnKeyDown
   )
);
builder.AddAttribute(++subseq, "onkeyup",
   EventCallback.Factory.Create<KeyboardEventArgs>(
      this, TaskOnKeyUp
   )
);

Et pour déclencher l’évènement :

private async Task TaskOnKeyDown(KeyboardEventArgs args)
{
   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 :

about
careers

Laisser un commentaire

advertise
tools
tour
about