Eingabefelder für Zahlen (Folge 20)

 in Folgen des Podcasts

Zahlen und Währungsfelder sind ein wichtiger Bestandteil jeder Business Anwendung. Viele Anforderungen deckt der Standard mit Input-Tag (type=number) ab. Wir schauen uns alle Features des Standards an und zeigen die Grenzen auf sowie die Überwindung dieser Barrieren.

Die wichtigsten Inhalte dieser Folge in Kürze:

  • Vorteile und Grenzen des Standard Eingabemöglichkeit in HTML

  • Situationen, in den eine eigene Implementierung notwendig ist

  • Lösungsansätze für das eigene Numberfield

  • Unterscheidung zwischen Transformierungs- und Validierungsfehler

  • Praktische Tipps für die Umsetzung eines Numberfields

Abonniere den Podcast auf iTunes 🎧: http://apple.co/2OlOKQI

Ich freue mich, wenn du dir ein paar Minuten Zeit nimmst und diesen Podcast auf iTunes bewertest.

Xing: http://bit.ly/sd-xing

Facebook: http://bit.ly/angular-facebook

Empfohlene Beiträge
2 Kommentare anzeigen
  • Avatar
    Alexander Merzer

    Hallo Sebastian.
    Erstmal danke für deinen Podcast zum Zahlen eingeben.
    Wie blockiere ich die Zeichen? Mit einer Regex? Kannst du mir bitte ein Beispiel machen, weil ichs noch nicht verstehe?

    • Sebastian Dorn
      Sebastian Dorn

      Hallo Alexander,
      vielen Dank für deine Frage. In deiner Frage beinhaltet mehrere Fragen:

      1) In welchem Schritt kann ich Zeichen bei Benutzereingaben blockieren?
      Bei Tastatureingaben gibt es mehre Events, wie KeyUp (Loslassen der Taste) und KeyDown (Drücken einer Taste). Beim Blockieren empfehle ich KeyDown-Event, da dies Früher ausgeführt wird, als das KeyUp-Event.

      2) Wie blockiere ich die Eingabe technisch?
      event.preventDefault();
      (siehe https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)

      3) Wie stelle ich sicher, dass ich nur bestimmte Zeichen blockiere?
      Dies kannst du mit einer Regex prüfen. Wichtig ist dabei, dass du Zeichen wie TAB, ESC oder ENTER nicht filterst.

      Schau dir dazu den Programmcode unter https://github.com/dornsebastian/angular-resist-user-input/ an – insbesondere src/app/app.component.ts und src/app/app.component.html

      Viele Grüße,
      Sebastian