mask_text_input_formatter

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

mask_text_input_formatter 套件為 Flutter 的 TextField 與 TextFormField 小工具提供了一個 TextInputFormatter，支援使用可自訂的遮罩實時輸入格式化。它透過在使用者輸入時自動插入分隔符並強制執行格式規則，協助使用者以結構化方式輸入電話號碼、日期或識別碼等資料。此格式化工具支援動態遮罩，並能正確處理跨平台的游標定位。非常適合需要一致輸入模式卻無需手動驗證的表單。

適用情境

帶國家代碼格式的電話號碼輸入
日期輸入，格式為 DD/MM/YYYY
信用卡號碼格式化帶空格
自定義數字或字母數字模式輸入
需要嚴格數據結構的表單欄位

主要特色

即時輸入遮罩
支援動態與靜態遮罩
編輯期間正確的位置光標
跨平台相容性（Android、iOS、Web、macOS、Windows、Linux）
與 TextField 和 TextFormField 的輕鬆整合

適合對象

需要結構化輸入的表單建構器
國際化就緒的輸入欄位
具有嚴格格式要求的數據採集應用
使用者友善的資料輸入介面
尋求最小驗證邏輯的開發者

使用建議

可能需要仔細定義遮罩以避免意外行為
如果未正確設定，可能會干擾複製貼上作業
對複雜條件遮罩的支援有限
對高頻輸入場景的效能影響
不適用於非文字輸入類型

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

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"

搜尋套件、儲存庫與 APP 分類