Code Monkey home page Code Monkey logo

input-mask-android's Introduction

Input Mask

Awesome Android Arsenal Bintray codebeat badge license

PlatformAndroidiOSmacOS

Direct input

More GIFs [~3 MB] Direct input Direct input Direct input
Direct input Direct input

Important: Migration Guide: v.5

We've added a new concept of cursor gravity to our library internals. A simple flag had allowed us to get rid of some logic flaws and to finalise the right-to-left functionality at the cost of backward compatibility loss.

Make sure to take a look at our CHANGELOG in order to get familiar with the breaking changes.

Description

Input Mask is an Android & iOS native library allowing to format user input on the fly.

The library provides you with a text field listener; when attached, it puts separators into the text while user types it in, and gets rid of unwanted symbols, all according to custom predefined pattern.

This allows to reformat whole strings pasted from the clipboard, e.g. turning pasted 8 800 123-45-67 into
8 (800) 123 45 67.

Each pattern allows to extract valuable symbols from the entered text, returning you the immediate result with the text field listener's callback when the text changes. Such that, you'll be able to extract 1234567 from 8 (800) 123 45 67 or 19991234567 from 1 (999) 123 45 67 with two different patterns.

All separators and valuable symbol placeholders have their own syntax. We call such patterns "masks".

Mask examples:

  1. International phone numbers: +1 ([000]) [000] [00] [00]
  2. Local phone numbers: ([000]) [000]-[00]-[00]
  3. Names: [A][-----------------------------------------------------]
  4. Text: [A…]
  5. Dates: [00]{.}[00]{.}[9900]
  6. Serial numbers: [AA]-[00000099]
  7. IPv4: [099]{.}[099]{.}[099]{.}[099]
  8. Visa card numbers: [0000] [0000] [0000] [0000]
  9. MM/YY: [00]{/}[00]
  10. UK IBAN: GB[00] [____] [0000] [0000] [0000] [00]

Questions & Issues

Check out our wiki for further reading.
Please also take a closer look at our Known issues section before you incorporate our library into your project.

For your bugreports and feature requests please file new issues as usually.

Should you have any questions, search for closed issues or open new ones at StackOverflow with the input-mask tag.

We also have a community-driven cookbook of recipes, be sure to check it out, too.

Gradle

Make sure you've added Kotlin support to your project.

repositories {
    jcenter()
}

dependencies {
    implementation 'com.redmadrobot:input-mask-android:5.0.0'
    
    implementation 'org.jetbrains.kotlin:kotlin-stdlib:$latest_version'
}

InputMask vs. NoClassDefFoundError

java.lang.NoClassDefFoundError: Failed resolution of: Lkotlin/jvm/internal/Intrinsics;

Receiving this error might mean you haven't configured Kotlin for your Java only project. Consider explicitly adding the following to the list of your project dependencies:

implementation 'org.jetbrains.kotlin:kotlin-stdlib:$latest_version'

— where latest_version is the current version of kotlin-stdlib.

InputMask vs. android:inputType and IndexOutOfBoundsException

Be careful when specifying field's android:inputType. The library uses native Editable variable received on afterTextChange event in order to replace text efficiently. Because of that, field's inputType is actually considered when the library is trying to mutate the text.

For instance, having a field with android:inputType="numeric", you cannot put spaces and dashes into the mentioned Editable variable by default. Doing so will cause an out of range exception when the MaskedTextChangedListener will try to reposition the cursor.

Still, you may use a workaround by putting the android:digits value beside your android:inputType; there, you should specify all the acceptable symbols:

<EditText
    android:inputType="number"
    android:digits="0123456789 -."
    ... />

— such that, you'll have the SDK satisfied.

Alternatively, if you are using a programmatic approach without XML files, you may consider configuring a KeyListener like this:

editText.setInputType(InputType.TYPE_CLASS_NUMBER);
editText.setKeyListener(DigitsKeyListener.getInstance("0123456789 -.")); // modify character set for your case, e.g. add "+()"

InputMask vs. autocorrection & prediction

(presumably fixed by PR50)

Symptoms:

  • You've got a wildcard template like [________], allowing user to write any kind of symbols;
  • Cursor jumps to the beginning of the line or to some random position while user input.

In this case text autocorrection & prediction might be a root cause of your problem, as it behaves somewhat weirdly in case when field listener tries to change the text during user input.

If so, consider disabling text suggestions by using corresponding input type:

<EditText
    ...
    android:inputType="textNoSuggestions" />

Additionally be aware that some of the third-party keyboards ignore textNoSuggestions setting; the recommendation is to use an extra workaround by setting the inputType to textVisiblePassword.

InputMask vs. android:textAllCaps

Kudos to Weiyi Li for reporting this issue

Please be advised that android:textAllCaps is not meant to work with EditText instances:

This setting will be ignored if this field is editable or selectable.

Enabling this setting on editable and/or selectable fields leads to weird and unpredictable behaviour and sometimes even crashes. Instead, consider using android:inputType="textCapCharacters" or workaround by adding an InputFilter:

final InputFilter[] filters = { new InputFilter.AllCaps() };
editText.setFilters(filters);

Bare in mind, you might have to befriend this solution with your existing android:digits property in case your text field accepts both digits and letters.

References

The list of projects that are using this library which were kind enough to share that information.

Feel free to add yours below.

Special thanks

These folks rock:

License

The library is distributed under the MIT LICENSE.

input-mask-android's People

Contributors

antonkazakov avatar fi5t avatar johnjohndoe avatar sepppenner avatar shipaaaa avatar taflanidi avatar vkotovv avatar xanderblinov avatar yatsinar avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.