Über die Grundlagen hinaus: Numerische Eingaben wie ein Profi mit „' handhaben

Was ist

Gemäß MDN Docs Definition: Elemente vom Typ Zahl werden verwendet, um dem Benutzer die Eingabe einer Zahl zu ermöglichen. Sie verfügen über eine integrierte Validierung, um nicht numerische Eingaben abzulehnen.

Im Grunde handelt es sich also um eine Funktion zur Verbesserung der Benutzererfahrung auf unseren beschissenen Websites und Web-Apps. Obwohl es sich um eine nette Funktion zur Vereinfachung numerischer Eingaben handelt, weist sie einige Verhaltensweisen auf, die auf den ersten Blick vielleicht nicht offensichtlich sind, die uns als Webentwickler jedoch bewusst sein sollten.

Diese Verhaltensweisen hängen zusammen mit:

1. Virtuelle Tastatur
2. Wissenschaftliche Notationen

Virtuelle Tastatur

Eine virtuelle Tastatur ist eine Tastatur, die auf Ihrem Bildschirm angezeigt wird, normalerweise in Touch-Eingabegeräten wie Mobiltelefonen, Tablets/iPads und einigen unterstützenden Technologien.

<input id="numeric-input" type="number">

Nur ​​die Verwendung von type="number" scheint auf den ersten Blick in Ordnung zu sein, bei der Verwendung einer virtuellen Tastatur besteht jedoch ein Problem. Möglicherweise wird anstelle einer numerischen Tastatur eine Volltastentastatur geöffnet, was die Benutzererfahrung und Eingabegenauigkeit beeinträchtigen kann.

`" />

Lösungseingabemodus

Auch wenn das Problem mit der virtuellen Tastatur bei neueren Betriebssystem- und Browserversionen möglicherweise nicht auftritt, ist es dennoch eine gute Idee, das Attribut „inputmode“ zu verwenden, da es einen Hinweis auf die Art der Daten gibt, die der Benutzer möglicherweise beim Bearbeiten des Elements oder seiner Elemente eingibt Inhalt.
Dadurch können Browser für alle Versionen und Geräte eine entsprechende virtuelle Tastatur anzeigen und so die allgemeine Benutzererfahrung (UX) der Anwendung verbessern.

inputmode kann viele Werte haben, aber für unseren Anwendungsfall mit numerischen Eingaben sollten wir einen dieser beiden Werte verwenden:
1.numerisch

<input id="numeric-input" type="number" inputmode="numeric">

Die Eingabetypnummer akzeptiert jeden rationalen Wert. Wenn Sie keine Bruchwerte, sondern nur ganze Zahlen akzeptieren, sollte in solchen Szenarien die Verwendung eines numerischen Werts bevorzugt werden.

2.dezimal

<input id="numeric-input" type="number" inputmode="decimal">

Wenn Sie Bruchzahlen akzeptieren, verwenden Sie einen Dezimalwert, da dadurch eine virtuelle Tastatur angezeigt wird, die die Ziffern und das Dezimaltrennzeichen für das Gebietsschema des Benutzers enthält.

Verwenden Sie in Ihrer Eingabe immer einen Dezimalwert, es sei denn, Sie akzeptieren keine Bruchwerte.

`" />

Wissenschaftliche Notationen

Viele von uns haben vielleicht vergessen oder wissen nicht, dass e oder E gültige numerische Werte in wissenschaftlichen Notationen sind.

`" />

Ja, e oder E bedeutet in wissenschaftlichen Notationen "Exponent von Zehn" und wird zur Darstellung sehr großer oder kleiner Werte verwendet. z.B.

1e5 = 100000 
     or 
1e-5 = 0.00001

Der HTML-Eingabetyp „Nummer“ wurde im Hinblick auf Flexibilität entwickelt und unterstützt diese wissenschaftliche Notation, sodass die Eingabe von Exponenten (z. B. 1e5) möglich ist. Während dies an sich kein Problem darstellt und in manchen Kontexten nützlich sein kann, kann es problematisch werden, wenn die Eingabe nur aus einfachen Zahlen bestehen soll.

Es gibt zwei Möglichkeiten, die Eingabe nur auf Zahlen zu beschränken und die wissenschaftlichen Notationen nicht zuzulassen.

1. Regex verwenden? Muster.
2. Mit Javascript (meine bevorzugte Methode).

Verhindern von Standardverhalten mithilfe von Javascript

In den meisten Szenarien möchte ich nicht, dass die Benutzer die Notationen „e“ oder „E“ eingeben, da diese nicht benötigt werden und das Erlauben dieser Notationen zu unerwarteten Problemen führen kann.

Es gibt viele Möglichkeiten, dies zu erreichen, aber meine Lieblingsmethode besteht darin, zu verhindern, dass die Taste „e“ oder „E“ registriert wird. Wir können dies mit dem Keydown-Ereignis und verhindernDefault.
erreichen

 element.addEventListener("keydown", (e) => {
    if (["e", "E"].includes(e.key)) {
      // you can also add "+" and "-" if you want to prevent them from being registered.
      e.preventDefault();
    }
  });

Diese Methode gefällt mir aus drei Gründen besonders gut:

• Es gibt jedem, der unseren Code später liest, eine klare Botschaft, dass wir die Tasten e oder E nicht registrieren möchten.
• Es ermöglicht auch eine bessere UX, da wir den Schlüssel selbst nicht registrieren, anstatt die Werte zu ändern.
• Der Typ des keydown-Ereignisses ist KeyboardEvent, das uns direkten Zugriff auf die Schlüsselwerte ermöglicht und den Gesamt-DX der Lösung verbessert.

Nicht alle numerischen Eingaben müssen vom Eingabetyp „Nummer“ sein

Manchmal können wir instinktiv nach einer Eingabetypnummer greifen, wenn wir eine Eingabeanforderung sehen, die numerische Eingaben akzeptiert, aber manchmal ist die Eingabetypnummer nicht die richtige Lösung für solche Szenarien.

Einige Beispiele für solche Szenarien sind:

• Kreditkarte/Debitkarte: Wenn wir ein Eingabefeld für Kredit-/Debitkarte haben, ist es besser, anstelle des Eingabetyps „Zahl“ den Eingabetyp „Text“ mit dem Eingabemodus „Numerisch“ und „Numerisch“ zu verwenden Validierung mit Ihrer bevorzugten Methode, da eine Kreditkarte führende Nullen haben kann und einige Browser dies möglicherweise nicht zulassen. Außerdem möchten wir möglicherweise einige kartenspezifische Validierungen hinzufügen oder einen Abstand zwischen einer Gruppe von vier Zahlen zulassen (wie er auf der Karte aufgedruckt ist). ).

• Postleitzahl: Während die meisten Länder numerische Postleitzahlen haben, können einige Länder wie Kanada alphanumerische Codes haben. Es ist wichtig, Lösungen entsprechend Ihrem Bedarf zu verwenden, es könnte sich um den Eingabetyp „Nummer“ handeln oder geben Sie Text ein.

• Mobilfunknummern: Sie sollten immer den Eingabetyp input="tel" mit einem für Ihren Anwendungsfall geeigneten Regex-Muster verwenden.

Abschluss

Da modernes HTML einige wirklich nette Dienstprogramme bereitstellt, kann die Implementierung einiger Dinge wie die Eingabetypnummer sehr trivial erscheinen. Als Entwickler sollten wir jedoch immer auf diese Dienstprogramme achten und darauf, wie wir sie nutzen können, um noch bessere Benutzererlebnisse zu schaffen.

Wenn Ihnen dieser Artikel gefallen hat, hinterlassen Sie bitte eine Reaktion. Wenn Ihnen etwas nicht gefallen hat, können Sie Ihr Feedback in den Kommentaren hinterlassen.

Ich mag es, mit Menschen über Technologie und die damit verbundenen Ereignisse in Kontakt zu treten und mit ihnen zu reden. Sie können sich mit mir auf Twitter/X und LinkedIn verbinden.

Sie können mir auch auf Dev.to folgen, um eine Benachrichtigung zu erhalten, wenn ich einen neuen Artikel veröffentliche.

Das obige ist der detaillierte Inhalt vonÜber die Grundlagen hinaus: Numerische Eingaben wie ein Profi mit „' handhaben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!