Input Mask

This PHPMaker 2024 project will show you how to implement Mask for Input Textbox controls on Add/Edit form. This is very useful for DateTime, Date, Time, Phone, or other similar data that need to be Masked. In addition, it will automatically also handle Thousand and Decimal separator for Numeric fields. This will make End-Users are easy to input data without having to type the separator characters.

This project includes MasinoInputMask24 Extension that I made for PHPMaker 2024. This Extension, which is actually part of Masino Extensions for PHPMaker 2024, has the ability to detect all the Numeric fields, and will implement auto Thousand Separator or Decimal Separator to the controls. It will also by default change the style of the Input Textbox becomes Right-Align.

Since the Extension supports adding Mask to the Input Textbox control, then we may adjust the Mask setting for Phone, DateTime, Date, and Time fields via the Fields section under Advanced setting of the Extension. The Extension also provides NumberOfDecimal option for Numeric field with Float or Decimal types. We may enter how many digits after Decimal separator for the certain Field(s).

For Phone (or any other data than DateTime) that needs to be Masked, then make sure we have already chosen String from Format setting under Fields setup -> View Tag pane of our PHPMaker 2024 project. This is important, so that the Extension will detect and implement the logic for such Fields when PHPMaker generates ALL the script files.

The Mask feature from MasinoInputMask24 Extension can also be implemented to DateTime or Date field types, along with the DateTimePicker control that used by Tempus Dominus (Date/Time Picker) Extension that provided by PHPMaker. In other words, both Extensions will not clash between one to another.

By using MasinoInputMask24 Extension, then we can restrict which characters type that will be allowed to be typed/entered into the Textbox control. For example, for DateTime, Date, or Time, we can only allow numeric characters. In addition, for Numeric field types, then it will automatically allow only numeric characters.

We may also implement the auto Thousand Separator and Decimal Separator for some Numeric Fields that related to Calculation process. When End-Users are typing a Numeric data, then the Calculation result will automatically be displayed on-the-fly with the Thousand Separator and Decimal Separator, too.

Last but not least, the MasinoInputMask24 Extension also provides the additional Options that we can add very easy via Global or Fields level of the Extension. This is one of the advantages of using Extensions in PHPMaker projects.