Masked Input

Easily add inputs to your web app that need to match a specific pattern—like phone numbers!

Configuring the Masked Input

The Masked Input is just like the regular input in WeWeb, but with a twist—you get to add a pattern mask! Here's a quick guide on how to set up your pattern:

A pattern mask is simply a string like this: '{#}000[aaa]/NIC-``*[**]'

Here's what each part means:

• 0: any digit
• a: any letter
• *: any character
• []: makes the input optional
• {}: includes a fixed part in the unmasked value

Check out these examples, each demonstrating how to use pattern masks for different types of inputs:

• US phone: {(000)} 000-0000
  Explanation: This pattern is used for formatting US phone numbers, where the area code is enclosed in parentheses, followed by the main number.

• French phone: +{33} 000 000 000
  Explanation: This pattern includes the French country code (+33) and formats the local phone number in groups of three digits.

• Bank card: 0000 0000 0000 0000
  Explanation: This pattern is for credit or debit card numbers, typically consisting of 16 digits grouped in sets of four for readability.

• International Bank Account Number (IBAN): 0000 0000 0000 0000 0000 00
  Explanation: This pattern accommodates the IBAN format, which can vary in length but often includes up to 22 characters.

• IP address: 000.000.000.000
  Explanation: This pattern is for IPv4 addresses, consisting of four sets of numbers separated by dots, each ranging from 0 to 255.

• US Social Security number: 000-00-0000
  Explanation: This pattern matches the format of a US Social Security number, with three groups of digits separated by hyphens.

• French Social Security number: 00 00 00 000 000
  Explanation: This pattern is tailored for the French Social Security number format, which includes several groups of digits separated by spaces.