Back to Amphtml

Input Masking

examples/masking.amp.html

latest4.8 KB
Original Source

Input Masking

Mask with amp-state

Masked input: {{statemask}}, {{statemask-unmasked}}

Reset value with AMP.setState

Apply value with AMP.setState

Named Masks

Credit card (payment-card)

mm/dd/yyyy (date-mm-dd-yyyy)

dd/mm/yyyy (date-dd-mm-yyyy)

yyyy-mm-dd (date-yyyy-mm-dd)

mm/yy (date-mm-yy)

fieldvalueunmasked
payment-card{{payment-card}}{{payment-card-unmasked}}
date1{{date1}}{{date1-unmasked}}
date2{{date2}}{{date2-unmasked}}
date3{{date3}}{{date3-unmasked}}
date4{{date4}}{{date4-unmasked}}

Custom Masks

Plain text (no mask)

Single character

Phone 2

Phone (German)

US Postal Code

Canadian Postal Code

US or Canada postal code

Dollars

fieldvalueunmasked
text{{text}}{{text-unmasked}}
phone2{{phone2}}{{phone2-unmasked}}
phone3{{phone3}}{{phone3-unmasked}}
post-code-us{{post-code-us}}{{post-code-us-unmasked}}
post-code-ca{{post-code-ca}}{{post-code-ca-unmasked}}
post-code-both{{post-code-both}}{{post-code-both-unmasked}}
amount{{amount}}{{amount-unmasked}}

Full form

Name

Address Line 1

Address Line 2

City

Zip Code

Phone

Dollars

Payment card

Success!

Forms with initial values

Postal Codes

value | mask | masked || 10001 | 00000 00000-0000 | | | 10001-1234 | 00000 00000-0000 | | | A1A 1A1 | L0L_0L0 | | | 10001 | 00000 00000-0000 L0L_0L0 | | | 10001-1234 | 00000 00000-0000 L0L_0L0 | | | A1A 1A1 | 00000 00000-0000 L0L_0L0 | |

Phone

value | masked +1(000)000-0000 || +18006492568 | | | 18006492568 | | | 8006492568 | | | (800)649-2568 | | | (800)649-2568 | | | 1(800)649-2568 | | | 1-800-649-2568 | |

Dollars

value | masked $0.00 $00.00 $000.00 $0000.00 $00000.00 $000000.00 || 1 | | | 12 | | | 123 | | | 1234 | | | 12345 | | | 123456 | | | 1234567 | | | 12345678 | | | 123456789 | |

Payment card

card type | masked || American Express | | | American Express | | | American Express Corporate | | | Australian BankCard | | | Diners Club | | | Diners Club | | | Discover | | | Discover | | | JCB | | | JCB | | | MasterCard | | | MasterCard | | | Visa | | | Visa | | | Visa | |

Success!

All <amp-story> locale phone numbers

Some have multiple formats possible

(may contain incorrect masks)

Country | format | field || Algeria | +213-00-000-0000 | | | Argentina | +54(000)000-0000 | | | Bahrain | +973-0000-0000 | | | Belize | +501-000-0000 | | | Bolivia | +591-0-000-0000 | | | Brazil | +55-00-0000-0000 | | | Chile | +56-0-0000-0000 | | | China (PRC) | +86(000)0000-0000 | | | Colombia | +57(000)000-0000 | | | Costa Rica | +506-0000-0000 | | | Cuba | +53-0-000-0000 | | | Ecuador | +593-0-000-0000 | | | Egypt | +20(000)000-0000 | | | El Salvador | +503-00-00-0000 | | | France | +33-0-00-00-00-00 | | | Germany | +49-000-000 | | | Guatemala | +502-0-000-0000 | | | Honduras | +504-0000-0000 | | | India | +91(0000)000-000 | | | Indonesia | +62(800)000-0000 | | | Iraq | +964(000)000-0000 | | | Italy | +39(000)0000-00-00 | | | Japan | +81(000)000-000 | | | Jordan | +962-0-0000-0000 | | | Korea (South) | +82-00-000-0000 | | | Kuwait | +965-0000-0000 | | | Lebanon | +961-00-000-000 | | | Libya | +218-00-000-000 | | | Mexico | +52-00-00-0000 | | | Morocco | +212-00-0000-000 | | | Netherlands | +31-00-000-0000 | | | Nicaragua | +505-0000-0000 | | | Norway | +47(000)00-000 | | | Oman | +968-00-000-000 | | | Panama | +507-000-0000 | | | Paraguay | +595(000)000-000 | | | Peru | +51(000)000-000 | | | Portugal | +351-00-000-0000 | | | Qatar | +974-0000-0000 | | | Russia | +7(000)000-00-00 | | | Saudi Arabia | +966-5-0000-0000 | | | Spain | +34(000)000-000 | | | Syrian Arab Republic | +963-00-0000-000 | | | Taiwan | +886-0000-0000 | | | Tunisia | +216-00-000-000 | | | Turkey | +90(000)000-0000 | | | United Arab Emirates | +971-50-000-0000 | | | United Kingdom | +44-00-0000-0000 | | | Uruguay | +598-0-000-00-00 | | | USA and Canada | +1(000)000-0000 | | | Venezuela | +58(000)000-0000 | | | Vietnam | +84(000)0000-000 | | | Yemen | +967-000-000-000 | |

Success!

Combined Phone Form example (amp-list)

(may contain incorrect masks)

AlgeriaArgentinaBahrainBelizeBoliviaBrazilCanadaChileChina (PRC)ColombiaCosta RicaCubaEcuadorEgyptEl SalvadorFranceGermanyGuatemalaHondurasIndiaIndonesiaIraqItalyJapanJordanKorea (South)KuwaitLebanonLibyaMexicoMoroccoNetherlandsNicaraguaNorwayOmanPanamaParaguayPeruPortugalQatarRussiaSaudi ArabiaSpainSyrian Arab RepublicTaiwanTunisiaTurkeyUnited Arab EmiratesUnited KingdomUruguayUSAVenezuelaVietnamYemen

| Phone (United States) | |

x.cc == countryCode)[0]">

| Phone ({{cd}}) | |

fieldvalueunmasked
phone{{phone}}{{phone-unmasked}}