mask_text_input_formatter

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Das Paket mask_text_input_formatter bietet einen TextInputFormatter für die Widgets TextField und TextFormField von Flutter und ermöglicht Eingabeformatierung in Echtzeit mit anpassbaren Masken. Es hilft Benutzern, Daten wie Telefonnummern, Datumsangaben oder IDs strukturiert einzugeben, indem es automatisch Trennzeichen einfügt und Formatierungsregeln während der Eingabe erzwingt. Der Formatter unterstützt dynamische Masken und verarbeitet die Cursorposition korrekt über Plattformen hinweg. Er ist ideal für Formulare, die konsistente Eingabemuster ohne manuelle Validierung erfordern.

Anwendungsfälle

Telefonnummer-Eingabe mit Ländercode-Formatierung
Dateneingabe mit Maske DD/MM/JJJJ
Kreditkartennummerformatierung mit Leerzeichen
Benutzerdefinierte numerische oder alphanumerische Muster-Eingaben
Formularfelder, die eine strenge Datenstruktur erfordern

Hauptmerkmale

Echtzeit-Eingabemaske
Unterstützung für dynamische und statische Masken
Korrekte Cursorpositionierung während der Bearbeitung
Plattformübergreifende Kompatibilität (Android, iOS, Web, macOS, Windows, Linux)
Einfache Integration mit TextField und TextFormField

Geeignet für

Formularbaukästen, die strukturierte Eingaben benötigen
Internationalisierungs-fähige Eingabefelder
Daten-Erfassungs-Apps mit strengen Formatanforderungen
Benutzerfreundliche Eingabeschnittstellen
Entwickler, die minimale Validierungslogik suchen

Hinweise

Kann eine sorgfältige Maskendefinition erfordern, um unerwartetes Verhalten zu vermeiden
Kann Kopier-/Einfügevorgänge beeinträchtigen, wenn nicht korrekt konfiguriert
Eingeschränkter Support für komplexe bedingte Masken
Leistungseinfluss bei Szenarien mit hoher Eingabefrequenz
Nicht geeignet für nicht-textbasierte Eingabetypen

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

The package provides TextInputFormatter for TextField and TextFormField which format the input by a given mask.

logo

Example

Check 'example' folder for code sample

example

Usage

Follow the install guide
Import the library:

import 'package:mask_text_input_formatter/mask_text_input_formatter.dart';

Create mask formatter:

var maskFormatter = new MaskTextInputFormatter(
  mask: '+# (###) ###-##-##', 
  filter: { "#": RegExp(r'[0-9]') },
  type: MaskAutoCompletionType.lazy
);

Set it to text field:

TextField(inputFormatters: [maskFormatter])

Get value

Get masked text:

print(maskFormatter.getMaskedText()); // -> "+0 (123) 456-78-90"

Get unmasked text:

print(maskFormatter.getUnmaskedText()); // -> 01234567890

Change the mask

You can use the updateMask method to change the mask after the formatter was created:

var textEditingController = TextEditingController(text: "12345678");
var maskFormatter = new MaskTextInputFormatter(mask: '####-####', filter: { "#": RegExp(r'[0-9]') });

TextField(controller: textEditingController, inputFormatters: [maskFormatter])  // -> "1234-5678"

textEditingController.value = maskFormatter.updateMask(mask: "##-##-##-##"); // -> "12-34-56-78"

Pakete, Repositories und App-Kategorien suchen