Filament Group

This is a demo of the Politespace plugin, an accessible alternative to input mask plugins that adds whitespace formatting when you blur away from an input and removes the spaces on focus so as to not interfere with editing. Learn more about politespace on GitHub.

Table of Contents

• Text
• Number
• Textarea
• Zip/Postal Code
• Telephone Number
• Price
• Credit Card

input type="text"

With placeholder

Add maxlength and pattern

Pattern enables a numeric keyboard on some mobile platforms (iOS). Recommend using type="number" for broader numeric keyboard support.

Change the Group Length (set to 2)

Use a non-uniform Group Length (set to "1,2,3,")

Use a non-uniform Group Length from Right to Left (set to "1,2,3,")

Add the data-politespace-reverse attribute.

Use a non-uniform Group Length, Truncating value (set to "1,2,3")

input type="number"

Using input[type=number] is important because it triggers the numeric keyboard on the Android browser and mobile Firefox.

Not using politespace (Control element)

With placeholder

Adds maxlength and pattern

Overflowing, super long values

Change where the proxy element anchors to

textarea

ZIP/Postal Codes

US Zip Code (set to "5,") with customized delimiter

Canadian Postal Code (set to "3,")

Telephone Numbers

US Phone Number

Strips country code (and any non-numeric characters) transparently.

Prices

Price (non-Integers, thousands Separator set to ",")

For integer prices, use the type="number" example below. For non-Integers, don’t use pattern="[0-9]*" or type="number", some mobile numeric keyboards do not include a ".".

Price (Integers only, thousands Separator set to ",")

For non-integer prices, use the type="text" example above.

Credit Card

input[type=number] (Credit Card) with data-politespace-creditcard. Automatically customizes the grouplength attribute based on the first digit: Most are "4,4,4,4" but AMEX is "4,6,5". To automatically adjust the maxlength, add data-politespace-creditcard-maxlength as well.

More Developer Tests