Eingabe mit Enter bestätigen

Vielfacher Kundenwunsch: wenn man die Enter (Return) Taste drückt, soll das Formular gespeichert werden. Also ein HTML EIngabe Formular wird per Enter ein Form Submit ausgelöst. Auch mit einer Blazor SPA steht man vor diesem Problem. Speziell wenn man kein Form und keinen Submit Button hat. Es soll eine Methode zum suchen aufgerufen werden wenn der Benutzer den Begriff in ein HTML Input tippt und Return drückt. Und das ganz natürlich ohne JavaScript. Dazu wird per Razor Syntax an ein Property der Blazor Page gebunden. Hier NeuAufgabe genannt. Allerdings nicht per Bind sondern per Bind-Value, weil man damit das Event für das Binding steuern kann. Mit onInput wird das Verhalten des JavaScript OnBlur Events nachgebildet. Die Bindung wird also laufend aktualisiert. Ergänzt um ein Event das den Tastendruck auch noch behandelt, kann man die gedrückte Taste prüfen.

   1:   <input class="form-control"
   2:                 @bind-value="NeuAufgabe"
   3:                 @bind-value:event="oninput" @onkeyup="@Check4Enter" />

Normalerweise benötigt ein Blazor Projekt keine oder kaum per Nuget nachinstallierten Pakete. Wenn man als Parametertyp Eventargs nimmt und den Debugger anwirft, kann man erkennen, das ein spezieller Typ kommt. Darin findet sich auch der KeyCode für die Enter Taste.

Anmerkung 2019-10-03 160944

Dies scheint eine ganz späte Änderung von Blazor zu sein. Es wird der Namensraum per @using Microsoft.AspNetCore.Components.Web benötigt um die Bindings und Eventhandlers von HTML Element zu erhalten. Jedenfalls kann nun jeder Tastendruck auf die Zeichenfolge Enter geprüft werden und ggf ein Save oder Search Logik starten.

   1:  public void Check4Enter(KeyboardEventArgs e) //Microsoft.AspNetCore.Components.Web ???
   2:      {
   3:          if (e.Key=="Enter")
   4:          {
   5:             ....
   6:          }
   7:  }
Kommentare sind geschlossen