Introducing MaskEdit

MaskEdit is the Edit-based component that is used to input/output in a fixed format. The basic look and usage are similar to the Edit component and are especially useful when processing information such as resident registration numbers, phone numbers, dates, etc. that have a fixed format.

If you use MaskEdit, then it is possible to force the use of the fixed format, reducing input/output errors. It is convenient to replace the complex string processing process with simple masking processing.

MaskEdit can be set in the number format and the string format according to the type property. The number format can be input and processed in the number format, and the string format can be input and processed in the character string format.

Also, depending on the setting of the format property, you can limit the input character, length, and display format as necessary.

Example

The following is a screen of personal information inquiry of a portal site. In order to protect personal information, input/output in various formats is available, such as marking part of the ID, domain address, and phone number with an asterisk (*), or prefixing the number with an area code.

Creating MaskEdit

Select MaskEdit from the toolbar and drag it to an appropriate size on the form to create it. Select the component and click on the form to create it in the default size.

Run it with QuickView (Ctrl + F6). After creating MaskEdit, if the type property is not set separately, then it is automatically set to 'number' and only numbers and signs can be entered.

Receiving Input in Fixed Format

Depending on the settings of the format property and the type property, you can induce the user to input in a specific format.

Example

The following is an example that allows you to input in a predetermined format.

sample_maskedit_02.xfdl

For the String input, you can enter 4 characters of the alphabet and 5 digits of the number. The spaces and hyphens in the middle of MaskEdit are defined in the mask settings and cannot be arbitrarily modified or cleared by the user. The mask setting is as follows:

aaaa - #####

For the Number input, you can enter an unlimited number of digits and up to 3 decimal places. In addition, a comma (,) is displayed every 3 digits of the integer part for easy viewing. The mask setting is as follows:

#,#.###

Core features used in the example

type

This is the property that sets the type of characters entered in MaskEdit. It can be set to one of 'number' and 'string'. If nothing is set, it operates as 'number'.

format

This is the property that sets the mask format to be applied to the input characters. When setting the mask format, use the combination of the following symbols. Note that the mask symbol can operate differently depending on the setting of the type property.

this.MaskEdit00.set_format( "@@@@" );
this.MaskEdit00.set_format( "###,000.00##" );
this.MaskEdit00.set_format( "999,000.0099" );

How to implement an example

Place the MaskEdit , Static components appropriately as shown in the example figure.

Set the properties to accept 4 letters, hyphens (-), and 5 numbers.

Set the properties to accept the number that can display 3 decimal places and display a comma (,) every 3 digits of the integer part.

Run it with QuickView (Ctrl + F6) and enter the character string to check input and output as in the example.

Processing Resident Registration Number to Be Invisible

Personal information such as resident registration number needs to be protected so that others cannot see it. The format property of MaskEdit makes it easy to protect it so that others cannot recognize it.

Example

When you process the resident registration number to be invisible, you cannot check if you entered it correctly if you put all the numbers with asterisks. Typing errors can be reduced by marking part of the number so that the user can check it.

sample_maskedit_03.xfdl

Core features used in the example

type

This is the property that sets the type of characters entered in MaskEdit. It can be set to one of 'number' and 'string'. If nothing is set, then it operates as 'number'.

format

This is the property that sets the mask format to be applied to the input characters. When setting the mask format, use the combination of the following symbols. Note that the mask symbol can operate differently depending on the setting of the type property.

this.MaskEdit00.set_format( "@@@@" );
this.MaskEdit00.set_format( "###,000.00##" );
this.MaskEdit00.set_format( "999,000.0099" );

How to implement an example

Place MaskEdit appropriately as shown in the example figure.

Set as follows to receive the first 6 digits of the date of birth, a hyphen (-), 1 digit to be displayed after, and 6 digits not to be displayed. Enter numbers that are not displayed by enclosing them in curly brackets ({ }).

Run it with QuickView (Ctrl + F6) and enter the character string to check input and output as in the example.