siqwin / mask_text_input_formatter Goto Github PK
View Code? Open in Web Editor NEWMasked text input formatter for flutter.
License: MIT License
Masked text input formatter for flutter.
License: MIT License
Got TLS error trying to find package mask_text_input_formatter at https://pub.dartlang.org.
pub get failed (server unavailable) -- attempting retry 1 in 1 second...
hi and tanks for you'r good library.
i added a default value to TextEditController for example => 12:23:59
it works fine, but when i tab on TextField for change the value and press backspace the whole value gone!
can you please help me. tanks a lot, this is my code:
this.startController.text = "12:23:59";
MaskTextInputFormatter(
initialText: 909006053,
mask: "+998 (••) ••• •• ••"
filter: {"•": RegExp(r'[0-9]')}).getMaskedText()
Expected input: +998 (90) 900 60 53
Obtained output: +998 (09) 006 05 3
Hi there,
I cannot format textfield value by adding text by controller
final TextEditingController _numberKeyboardController =
TextEditingController();
final phoneTextFormatter = MaskTextInputFormatter(
mask: "+998 (••) ••• •• ••", filter: {"•": RegExp(r'[0-9]')});
// ui code
child: PhoneTextFiled(
maskTextInputFormatter: phoneTextFormatter,
controller: _numberKeyboardController,
showCursor: true,
readOnly: true),
),
NumberKeyboard(
onChanged: (_){
// from custom NumberKeyboard i pass number to controller
},
textEditingController: _numberKeyboardController,
),
// ui code
When you press backspace it removes the character before the last character, and the cursor jumps just before the last character.
I can confirm that these issue only appears in flutter 1.22.5+
I think this issue is related to flutter/flutter#67892 somehow...
(all functionalities of textfield works as expected without the mast formatter)
Here is the mask formatter I used to test this issue:
var phoneMaskFormatter = new MaskTextInputFormatter(mask: '### ### ####', filter: { "#": RegExp(r'[0-9]') });
It would be interesting to update the current example of the project saying that the current one is just the default project of hello world.
When I enter any letter into a field with a mask on android, any following digit inputs will trigger keyboard to change from digits to letters. Only after entering few digits in a row keyboard changes will stop occuring.
Here is the video of the bug: https://vimeo.com/582486275.
Used mask:
MaskTextInputFormatter(
mask: '#### #### #### #### #### ####',
filter: {'#': RegExp(r'[A-Za-z0-9]')},
);
Android 9 HTC U 11
Keyboard: Gboard.
But it seems the bug can be reproduced on any android device.
Clearing a Textfield normally leads to setting the text to "".
But as soon as I tip a new Value, the old values get displayed.
I tried to debug it and it seems like the values are still stored in the _resultTextArray.
But setting this arry to Empty if the newValue is Empty leads to an Input Loss, when switching the Focus Node back to the Textfield.
import 'package:flutter/material.dart';
import 'package:mask_text_input_formatter/mask_text_input_formatter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'MaskTextInputFormatterExample',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ExamplePage(title: 'ExamplePage'),
);
}
}
class ExamplePage extends StatefulWidget {
final String title;
ExamplePage({Key key, this.title}) : super(key: key);
@override
_ExamplePageState createState() => _ExamplePageState();
}
class _ExamplePageState extends State<ExamplePage> {
var focusNode = FocusNode();
var textEditingController = TextEditingController();
var maskTextInputFormatter = MaskTextInputFormatter(
mask: "+# (###) ###-##-##", filter: {"#": RegExp(r'[0-9]')});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blueAccent,
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
controller: textEditingController,
inputFormatters: [maskTextInputFormatter],
focusNode: focusNode,
autocorrect: false,
keyboardType: TextInputType.phone,
decoration: InputDecoration(
hintText: "+1 (123) 123-45-67",
fillColor: Colors.white,
filled: true)))),
bottomNavigationBar: BottomAppBar(
child: Row(
children: <Widget>[
FlatButton(
onPressed: () {
textEditingController.text = '';
},
child: Text('CLEAR')),
FlatButton(
onPressed: () =>
FocusScope.of(context).requestFocus(FocusNode()),
child: Text('Loose Focus')),
FlatButton(
onPressed: () => textEditingController.text = '123456',
child: Text('Set text to 123456')),
],
),
),
);
}
}
When set maxLength to value corresponding to the mask length and maxLengthEnforced to true in TextField widget, this feature does not work as expected: when maxLength is reached if you type any character the onChange callback is called.
I've tried to use LengthLimitingTextInputFormatter too but no successs.
var _phoneMaskFormatter = MaskTextInputFormatter(mask: '(##) #####-####');
TextField(
controller: _phoneController,
inputFormatters: [
_phoneMaskFormatter,
LengthLimitingTextInputFormatter(15)
],
keyboardType: TextInputType.number,
maxLength: 15,
maxLengthEnforced: true,
onChanged: (value) {
debugPrint(value);
},
);
I discovered a problem when cleaning the controller using the clear or set empty value in the text field of the controller, when trying to fill the textformfield again the field is all filled in and if I remove the formatter from you the problem with the cache disappears.
Create a method to clear the mask.
I a musk for iban number and it works perfectly when entering values but it does not work properly and does not clear when we use backspase
The pattern I used is this:
####-####-####-####-####-####
I test on flutter 2.2 and 2.0
I have tested both versions 1.2.1 and 2.0.0-nullsafety.2 and 2.2.0 and 2.2.1.
I need enter a number with decimals, The decimals are optional and a max of two decimals but for integer part it can be one or more characters. It is possible to do this?
Example:
15
20.78
3455
23445.40
Привет, Сергей!
[√] Flutter (Channel master, 1.22.0-10.0.pre.176, on Microsoft Windows [Version 10.0.19041.508], locale ru-RU)
• Flutter version 1.22.0-10.0.pre.176 at C:\Users\kasim\Documents\flutter
• Framework revision 96ca0e272b (6 hours ago), 2020-09-15 09:02:04 +0100
• Engine revision 7e962ba911
• Dart version 2.10.0 (build 2.10.0-124.0.dev)
Установил на TextFormField маску телефонного номера из примера. Курсор автоматически не смещается вперёд, а при вводе пробела содержимое очищается.
Hi,
in another request, you responded that characters in brackets are optional. For me this did not work, the brackets became part of the mask.
I need to create a field for entering an IP address, and each address block can contain one or two or three digits.
Can you suggest me how to do this?
Add an option to apply the mask from right to left in the input.
Example with RL option activated:
Mask
##.###.###-#
Expected Behaviur
17.173.127-2
2.412.412-5
Normal Behaviur (how it works now)
17.173.127-2
24.124.125
Hi, after formatting, textEditingController.text = ''; The input box cannot be cleared.
TextField(
controller: textEditingController,
style: TextStyle(fontSize: 20.0),
inputFormatters: [maskTextInputFormatter],
autocorrect: false,
decoration: InputDecoration(
hintText: "XXXX-XXXX-XXXX-XXXX-XXXX",
fillColor: Colors.white,
filled: true,
),
onChanged: (text){
if (text.length == 3) {
textEditingController.text = '';
}
},
),
Hey! When I am using your mask text input formatter like
MaskTextInputFormatter(mask: '+1 ###-###-####', filter: { "#": RegExp(r'[0-9]') })
and want to paste from clipboard that already have +1, it is pasting with additional 1 at the start, so for example if I copied number like +10000110000 after paste I'll get +11000011000 instead of +10000110000 as expected to be like, any thoughts? :)
I found a strange behavior while trying to erase the text inside a TextFormField
or TextField
. I tried this on both versions 1.2.1
and 2.0.0-nullsafety.2
and the behavior are the same. What am I missing?
TextField(
keyboardType: TextInputType.number,
inputFormatters: [
MaskTextInputFormatter(
mask: '0###-###-##-##',
filter: {
"#": RegExp(r'[0-9]'),
},
),
],
),
[✓] Flutter (Channel stable, 2.0.3, on Mac OS X 10.15.7 19H524 darwin-x64, locale en-TR)
• Flutter version 2.0.3 at /Users/apple/SDK/flutter
• Framework revision 4d7946a68d (4 days ago), 2021-03-18 17:24:33 -0700
• Engine revision 3459eb2436
• Dart version 2.12.2
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
• Android SDK at /Users/apple/Library/Android/sdk
• Platform android-30, build-tools 30.0.2
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 12.4, Build version 12D4e
• CocoaPods version 1.10.0
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 4.1)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
[✓] IntelliJ IDEA Community Edition (version 2020.3)
• IntelliJ at /Applications/IntelliJ IDEA CE.app
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
[✓] VS Code (version 1.54.3)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.20.0
[✓] Connected device (2 available)
• MI 6 (mobile) • 16185061 • android-arm64 • Android 9 (API 28)
• Chrome (web) • chrome • web-javascript • Google Chrome 89.0.4389.90
• No issues found!
This is a great plugin. Thank you for simplifying TextInputFormatters.
One feature request is to have eager formatting
Given this configuration for date formatting:
MaskTextInputFormatter(
mask: '##/##/####',
filter: <String, RegExp>{'#': RegExp('[0-9]')},
),
I would expect that upon entering 01
, that the text field would add the formatting so it read 01/
. Reason being, if a user was really trying to enter in /
after the 01
, the text field doesn't allow them to do that, which could be frustrating.
Is that doable? I think the trickiest bit might be that when using backspace, we wouldn't want to add the /
on every text input event, or they'd never be able to delete any of the formatting. So there'd need to be some way to compare the state of the text before/after the change.
Always If I don't set keyboard type for Numbers, keyboard auto switch to letters.
Create a method to get the current mask.
Hi,
How is it possible create a mask for a date?
For example, I would like to be able to enter MM/YY in a field. So MM should be between 01 and 12, and YY between 00 and 99.
How to achieve this?
MaskTextInputFormatter(mask: '##/##');
Regards,
Please add money format mask with custom coin symbol (something like flutter_money_formatter).
While typing everything is fine. But after the TextField gets focus again and I start typing the field clears every time. Is that intended behaviour?
all the text is deleted with just one tap "delete" button, not one character by one
[+][1](###) ### ####
Characters between [] are optional
if you start with +1 -> +1 (456) 456 7897
If you start with a number -> (456) 456 7897
Hello,
We are having some issues with the mask on some devices.
This is the mask we are trying to implement:
inputFormatters: [ MaskTextInputFormatter( mask: '(##) # ####-####', filter: {"#": RegExp(r'[0-9]')}) ]
It usually works but we received reports of it not being initialised.
This is the flutter doctor -v output:
[√] Flutter (Channel stable, 1.22.4, on Microsoft Windows [Version 10.0.18363.1256], locale en-US)
• Flutter version 1.22.4 at D:\Flutter\flutter
• Framework revision 1aafb3a8b9 (8 weeks ago), 2020-11-13 09:59:28 -0800
• Engine revision 2c956a31c0
• Dart version 2.10.4[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
• Android SDK at C:\Users\Florin\AppData\Local\Android\sdk
• Platform android-30, build-tools 29.0.3
• Java binary at: D:\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04)
• All Android licenses accepted.[√] Android Studio (version 3.6)
• Android Studio at D:\Android Studio
• Flutter plugin version 45.1.1
• Dart plugin version 192.8052
• Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04)[√] Connected device (1 available)
• Android SDK built for x86 (mobile) • emulator-5554 • android-x86 • Android 10 (API 29) (emulator)
code is:
var maskFormatter = new MaskTextInputFormatter(mask: '###', filter: { "#": RegExp(r'[0-9]') });
using
inputFormatters: [maskFormatter]
when input box typing "1234567890"
ok input box is only "123"
but when delete, 4567890 still exist (hidden), when i can try to delete numbers, After hidden numbers removed,
Able to delete this number "123".
Please solve.
Thanks.
UPDATE.
the second bug is,
using code
MaskTextInputFormatter(mask: '###'),
after clear Text Controller.clear()
TextBox is clear, then again start typing , Previous value is auto filling in the textbox.
when i remove this code MaskTextInputFormatter(mask: '###'),
No problem working fine.
Hi, could you move null-safety version from pre-release to release?
Thanks for your package, I'm using it everywhere.
pubspec.yaml
`name: YourSayy
description: A new Flutter project.
pub publish
. This is preferred for private packages.publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1
environment:
sdk: ">=2.7.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
http: ^0.12.1
mask_text_input_formatter: ^1.0.7
cupertino_icons: ^0.1.3
dev_dependencies:
flutter_test:
sdk: flutter
google_sign_in: ^4.5.1
firebase_auth: ^0.16.1
flutter_screenutil: ^2.1.0
flappy_search_bar: ^1.7.2
provider: ^4.1.3
firebase_core: ^0.4.5
firebase_analytics: ^5.0.15
rxdart: ^0.24.1
flutter_twitter: ^1.1.3
sign_in_with_apple: ^2.5.1
cloud_functions: ^0.5.0
cloud_firestore: ^0.13.7
intl_phone_number_input: ^0.4.6+2
flutter:
uses-material-design: true
assets:
fonts:
PhoneSignUPScreen.dart
import 'package:YourSayy/Screens/LoggedInHomeScreen.dart'; import 'package:YourSayy/Screens/VisitorHomeScreen.dart'; import 'package:YourSayy/SignUpScreen/EmailSignUpScreen.dart'; import 'package:flutter/material.dart'; import 'package:firebase_auth/firebase_auth.dart'; import 'package:flutter/services.dart'; import 'package:mask_text_input_formatter/mask_text_input_formatter.dart';
How can we auto switch keyboard base on mask
with my example
var maskFormatterTrailer = new MaskTextInputFormatter(mask: "####@@@@@@@",filter: {"#":RegExp(r'[A-Z]'), "@": RegExp(r'[0-9]')});
when we input the first 4 character the keyboard is character, after to number it auto switch the keyboard to number
Hi Folks,
Sorry for my bad english, when open the dropdownbutton in the same screen with textfield the getUnmaskedText return clean value.
Hi,
(taking the example from https://pub.dev/packages/mask_text_input_formatter/example, changed the _ExamplePageState
):
class _ExamplePageState extends State<ExamplePage> {
var textEditingController = TextEditingController();
var maskTextInputFormatter = MaskTextInputFormatter(mask: "#####", filter: { "#": RegExp(r'[0-9]') });
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
TextField(
controller: textEditingController,
inputFormatters: [maskTextInputFormatter],
),
FlatButton(
child: Text('Clear'),
onPressed: () {
textEditingController.clear();
},
)
],
)
);
}
}
I have a button which clears the TextField
by clearing the controller. Well, the TextField
seems ok, but when I enter new input, the already cleared will be appended:
Since, with other input formatters this doesn't happen, I believe there's a problem with the MaskTextInputFormatter
. Am I right or do I make a mistake? How can I clear the TextField
properly?
Thanks in advance.
With these 3 variants:
v.1
final _childrenFormater = MaskTextInputFormatter(mask: '##');
final _children = TextEditingController(text: '0');
@override
void initState() {
super.initState();
_childrenFormater.formatEditUpdate(
TextEditingValue.empty, const TextEditingValue(text: '0'));
}
v.2
final _childrenFormater = MaskTextInputFormatter(mask: '##');
final _children = TextEditingController();
@override
void initState() {
super.initState();
_children.text = '0';
}
v.3
final _childrenFormater =
MaskTextInputFormatter(mask: '##', initialText: '0');
final _children = TextEditingController(text: '0');
and the form field:
TextFormField(
key: const Key('children'),
decoration: const InputDecoration(
labelText: 'Количество детей',
),
controller: _children,
keyboardType: TextInputType.number,
inputFormatters: [_childrenFormater],
validator: (value) {
if (value.isEmpty) return 'Введите значение';
return null;
},
onChanged: (value) {
print(value);
},
),
and with this text entry:
await tester.enterText(find.byKey(const Key('children')), '1');
the field does not get filled by 1. But if one removes init values, like this:
final _childrenFormater = MaskTextInputFormatter(mask: '##');
final _children = TextEditingController();
then the onChange prints out 1.
mask_text_input_formatter: ^1.1.0
Currently textfield clears after UI update (setState, for example). I use a timer in my app, which also updates the corresponding text widget that indicates remaining time, and UI updates every second, making input really frustrating, because every second textfield is being cleared.
'#' and 'A' has the same value, isn't that a typo error ?
updateMask(mask: mask, filter: filter ?? {"#": RegExp(r'[0-9]'), "A": RegExp(r'[^0-9]')});
EDIT : I miss-read, sorry
Hi 😁
I'm updating the value of TextEditingController from a widget based keyboard (buttons) but I can't get the output to be masked.
Any suggestion? Please and thank you
First of all I would like to thank you to provide this code. It help me a lot.
I need some help with something:
When the user press the backspace key at the Android and keep it pressed, the chars are being deleted until find the first non-digit separator character. The user needs to release the backspace and press it again to starts to remove the characters again. Is it a feature or unexpected behavior? If it was implemented this way, could you help me to identify which part of the code i would change to toggle on/off this feature ?
Thanks in advance.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.