PC SOFT

ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Home | Sign in | English EN
  • Edit control overview
  • Create an "Edit" control
  • Main characteristics of an Edit control
  • Type of an Edit control
  • Types and masks
  • Displaying a hint text in an Edit control
  • Other important characteristics
  • Edit control style
  • Customizing the alphanumeric keypad
  • Validation of Edit controls via the Enter key
  • Specific HTML 5 features
  • Converting an Edit control to a Static control
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Edit control overview
The Edit control allows users to enter data. This control can also be used to view information.

Create an "Edit" control

To create an "Edit" control:
  1. On the "Creation" tab, in the "Usual controls" group, click .
  2. Click where the control will be created in the window or page. The control appears in the editor.
Remark: You can also choose an Edit control from a list of preset controls by expanding "Edit". The list of available controls is displayed with the project skin template. Simply click the control you want to create in the editor.
To view the control characteristics, select "Description" in the context menu.
Report editor: You also have the ability to create an edit control in a report. For more details, see Input in the reports.
Main characteristics of an Edit control

Type of an Edit control

The format of an Edit control depends on the type of information displayed or entered. The following types of edit controls can be created:
  • Text to display or enter a character string (name, address, etc.).
  • Multiline text to display or enter several lines separated by a "Carriage Return".
  • WINDEV RTF text to enter and display information in RTF.
  • WEBDEV - Server code HTML text to enter and format rich text.
  • Password: when typing information, all characters will be replaced with asterisks on the screen.
  • Numeric to display or enter a numeric value (weight, etc.). The "+++" characters are displayed if the control is not large enough to display the entire number.
  • Currency to display or enter monetary values.
  • Currency + Euro to manage prices for example
  • Date to display or enter dates.
  • Time to enter or display times.
  • Duration to enter or display durations.
  • Text tokens to manage an input with tokens.
  • WEBDEV - Server code Upload to manage the file upload.

Types and masks

  • Input mask: Several input masks can be used for each type of Edit control.
    These input masks are multilingual: different input masks can be selected according to the runtime language of the project. For more details, see Multiple languages in the controls.
    These input masks can be modified programmatically with the InputMask property.
    iPhone/iPad The keyboard displayed when entering data in the control automatically adapts to the selected input mask. For example, the numeric keyboard will be automatically displayed to enter values in a control using a numeric input mask.
  • WINDEVAndroidJava Display mask: You can also define display masks for some types of controls (Currency, Currency + Euro, Date, Time and Duration). These display masks are used to define the characteristics of the control when it is not in edit.
    For example, a Date control can have:
    • the input mask: "MM/DD/YYYY".
    • the display mask: "DDDD DD MMMM YYYY" (long date format).
    Display masks can be multilingual and can be modified programmatically with the DisplayMask property.
WINDEVWEBDEV - Server codeiPhone/iPad

Displaying a hint text in an Edit control

The hint text is used to display a help text in the empty edit control. This help text disappears automatically as soon as the user enters the first character in the control.
Example of a hint text
This hint text is available for:
  • Text Edit controls.
  • WINDEViPhone/iPad Numeric, Currency and Currency + Euro Edit controls.
    To show the hint text in Numeric, Currency or Currency + Euro edit controls, the option "Blank if zero" must be checked ("Details" tab of the control description).
    You can also display the lower bound and the upper bound of the numeric edit control:
    • in the hint text ("Display the bounds in the hint text" in the "Details" tab of the control description).
    • in the control tooltip ("Display the bounds in the tooltip" in the "Details" tab of the control description).
The help text can be typed:
  • in the Edit control description window ("Help" tab in WINDEV/WINDEV Mobile and "Content" tab in WEBDEV).
  • programmatically with the Hint property.
WINDEViPhone/iPad The style of the hint text displayed in the control can be configured in the "Style" tab. By default, it corresponds to the style of the input area, in gray and italic. To modify it, simply select "Hint text" and check "Customize the style of the hint text".
The HintTextColor property is used to get and change the color of the hint text programmatically.
WEBDEV - Server code The hint text uses the same style as the input area, in italic and gray.
WINDEVJava

Other important characteristics

An Edit control can:
  • WINDEV be used to perform a "Drag and Drop". For more details, see Managing Drag and Drop.
  • WINDEVWindows use assisted input: When a user enters data in the control, the application automatically proposes the corresponding value from the HFSQL key item linked to the control.
    For example, in the "City" control, "London" is automatically proposed once "Lo" is typed.
    This feature can only be used with key items and Text items.
    Assisted input cannot be used with non-key items, numeric items, or if an input mask is used for dates. For more details, see Assisted input in an Edit control
An Edit control can also include:
  • WINDEVWindows an input history: When a users starts typing in the control, the list of values previously entered will appear automatically. This input history is not available for multiline controls. For more details, see Storing entered data (AAF).
  • WINDEV help during the input of file path. This option shows the different directories and files accessible as the user types a file name with its path. This option is not available if the standard assisted input is already used for the control.
To view the characteristics of the control, select "Description" in the context menu.

Edit control style

The "Style" tab allows you to customize the appearance of all the elements in the Edit control. You can apply styles to different elements:
  • The control caption: You can define the text font, position, color, etc.
  • The outside border.
  • The text in the input area.
  • The input area: For example, you can define the background color, border color, ...
    Remark: The "Margins" button allows you to set the margins between the text and the border of of the input area.
  • The hint text.
  • The tokens (if any).
  • Invalid or required input indicators.
  • ...
AndroidiPhone/iPad

Customizing the alphanumeric keypad

In Android and iOS applications, an on-screen keyboard appears automatically when a text input control receives the focus. This keyboard allows the user to enter the desired text.
This keyboard includes a button (bottom right) that can be customized:
To configure this button:
  1. Go to the "Details" tab of the Edit control description window.
  2. In the "Keyboard button" option, select the desired type of button. Depending on the selected type, the system will display the corresponding button in the current language on the device.

    Remark: The "Custom" button can only be added in Android.
  3. Validate.
The event associated with this button can be entered in the code editor. It corresponds to the optional event "Validation via keyboard". For more details, see Events associated with the Edit control.
WEBDEV - Server code

Validation of Edit controls via the Enter key

For each Edit control in a page, you can specify the action that will be run when the user presses the Enter key.
This allows, for example, to improve the default events in a page. For instance, there can be several search controls can in the same page, and each control can be validated by pressing the Enter key. The action performed will be the one associated with the Edit control that has focus.
To define the action associated with an Edit control:
  1. Create a button in your page containing the desired code.
  2. Open the Edit control description. In the "UI" tab, select the desired button in the " Action on 'Enter' " option.
WEBDEV - Server code

Specific HTML 5 features

Some characteristics of Edit controls use HTML 5 features:
  • Input masks. By choosing an HTML 5 input mask, the site lets the browser handle and check the input. It is not the page (the site) that performs the checks, but the browser itself. In any case, you can run WLanguage code when exiting a control, which allows for additional checks on the data entered. These features are available only for some browsers, from the following versions: Firefox 5, Chrome 12, Opera 11, Safari 5, ...
    For more details, see the help about the input masks of text, numeric, date and time controls.
  • HTML 5 search control: If this option is selected for a text control, the browser will display an "X" on the right of the control. This X allows the user to clear the control content.
    This option is available in the "General" tab of the control description window.
    Caution: This option is taken into account only on browsers supporting HTML 5, notably Chrome 12 and Safari 5.
  • Automatic completion: This option (located in the "Details" tab of the control description window) is used to enable or disable automatic completion on Edit controls. Automatic completion is enabled by default. When the user starts typing information in a form, all the page controls are immediately and automatically filled with the data previously typed on this computer.
    Autocomplete is a dangerous feature. It must be disabled when processing confidential data.
    Most browsers that support HTML 5 (Firefox, Chrome, Safari, Opera, etc.) support this feature as well.
Converting an Edit control to a Static control
WINDEVUniversal Windows 10 AppAndroidiPhone/iPadJava WINDEV and WINDEV Mobile allow you to automatically convert an Edit control to several Static controls:
  1. Select the Edit control to be converted.
  2. On the "Modification" tab, in the "Transformations" group, expand "Refactoring and swapping" and select "Edit control to Static".
A Static control is automatically created for the caption of the Edit control and also for the input area.
Related Examples:
The edit control Unit examples (WINDEV): The edit control
[ + ] Using an edit control.
The special characters Unit examples (WINDEV): The special characters
[ + ] Handling special characters in an RTF control and viewing the ASCII and ANSI codes.
The voice recognition functions Unit examples (WINDEV): The voice recognition functions
[ + ] Using the voice recognition functions.
The voice commands of Windows Vista (or Windows XP, with a specific software) are used to control WINDEV applications with the voice.
A WINDEV application already responds to the voice when the user dictates in an edit control or spells out the caption of a button.
You also have the ability to program a specific voice command to perform a specific action.
Advanced input mask Unit examples (WINDEV): Advanced input mask
[ + ] Handling the input masks in WINDEV:
- Defining the format of positive/negative number in a numeric edit control
- Defining how negative numbers will be displayed in a numeric edit control
- Defining how the value 0 will be displayed in a numeric edit control
- Using a regular expression to prevent from typing characters other than 1, 2, 3, 4, 5 and 6.
- Using a regular expression to "regulate" the input of a French registration number
WD Search Control Training (WINDEV): WD Search Control
[ + ] This example explains how to manage an edit control used to perform FullText searches of "google" type in your database.
WW_Rewali Complete examples (WEBDEV): WW_Rewali
[ + ] This example is a site for travel booking.

It proposes travels at very attractive prices.
You have the ability to choose the travel duration, the start dates, then validate the purchase until the payment via Paypal.

It is using the "scrolling banner" control and the planes.
Minimum version required
  • Version 9
This page is also available for…
Comments
Click [Add] to post a comment