PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • Overview of edit control
  • To create an "Edit" control
  • Main characteristics of edit control
  • Type of an edit control
  • Types and masks
  • Displaying an indication text in an edit control
  • Other important characteristics
  • Customizing the alphanumeric keypad
  • Validation of edit controls via the Enter key
  • Specific HTML 5 features
  • Swap
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Overview of edit control
The edit control allows the user to type information. The edit control can also be used to view information.
Versions 15 and later
Android The edit controls are now available for the Android applications.
New in version 15
Android The edit controls are now available for the Android applications.
Android The edit controls are now available for the Android applications.
Versions 16 and later
Universal Windows 10 App The edit controls are now available for the Windows Phone applications.
iPhone/iPad The edit controls are now available for the iPhone/iPad applications.
New in version 16
Universal Windows 10 App The edit controls are now available for the Windows Phone applications.
iPhone/iPad The edit controls are now available for the iPhone/iPad applications.
Universal Windows 10 App The edit controls are now available for the Windows Phone applications.
iPhone/iPad The edit controls are now available for the iPhone/iPad applications.
Versions 18 and later
Universal Windows 10 App The edit controls are now available for the applications in Windows Store apps mode.
New in version 18
Universal Windows 10 App The edit controls are now available for the applications in Windows Store apps mode.
Universal Windows 10 App The edit controls are now available for the applications in Windows Store apps mode.

To create an "Edit" control

To create an "Edit" control:
  1. In the window or page editor, click Creating an edit control (or select "Insert .. Control .. Edit control").On the "Creation" pane, in the "Usual controls" group, click .
  2. Click the position where the control will be created in the window or page. The control appears in creation mode.
Note: An edit control can also be created from a list of preset controls by clicking the arrow found on the right of Creating a preset edit control icon. The list of available controls (with their preview in the skin template of project) is displayed. All you have to do is click the requested control to create it in the editor.Note: You also have the ability to create an edit control from a list of preset controls by expanding "Edit". The list of available controls (with their preview in the skin template of project) is displayed. All you have to do is click the requested control to create it in the editor.
To display the control characteristics, select "Description" from the popup menu of control.
Report editor: You also have the ability to create an edit control in a report. See Input in the reports for more details.
Main characteristics of 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, ...).
    Notes:
    • Versions 21 and later
      WINDEVAndroidiPhone/iPad The Text edit controls can display a Delete button (a cross). This button allows the user to delete the content of the control. This button can be displayed in the input area:
      • when an input is performed in the control.
      • when the control loses focus.
        iPhone/iPad Note: In iOS 7 only, the cross appears while an input is performed in the control.
      • always (no matter whether the input cursor is in the control or not).
      New in version 21
      WINDEVAndroidiPhone/iPad The Text edit controls can display a Delete button (a cross). This button allows the user to delete the content of the control. This button can be displayed in the input area:
      • when an input is performed in the control.
      • when the control loses focus.
        iPhone/iPad Note: In iOS 7 only, the cross appears while an input is performed in the control.
      • always (no matter whether the input cursor is in the control or not).
      WINDEVAndroidiPhone/iPad The Text edit controls can display a Delete button (a cross). This button allows the user to delete the content of the control. This button can be displayed in the input area:
      • when an input is performed in the control.
      • when the control loses focus.
        iPhone/iPad Note: In iOS 7 only, the cross appears while an input is performed in the control.
      • always (no matter whether the input cursor is in the control or not).
    • AndroidiPhone/iPad You have the ability to enter Emojis in the edit control. If the information typed must be saved in a database, the linked item must be in Unicode format (Unicode string or text memo) to store the Emojis.
  • Multiline text to display or type several lines separated by a "Carriage Return".
    • WINDEVWindows Mobile In this case, you have the ability to display an horizontal or a vertical scrollbar.
    • WINDEV You also have the ability to display the Internet addresses and the file paths in link format.
    • WINDEVAndroidiPhone/iPadWindows MobileUniversal Windows 10 App Note: When a text edit control is enlarged in the editor, it automatically becomes a multiline edit control.
  • WINDEVWindows Mobile RTF text to type and display information in RTF format. See Handling an edit control in RTF format for more details.
    WINDEV For the applications that operate in Windows Vista (or later) or in Tablet PC, you have the ability to include the "Handwritten input" option. This option allows the user to directly type the text in the control with the stylus or with the mouse. This feature is available by default in the applications that operate on Mobile.
  • WINDEVWEBDEV - Server code HTML text to type and format texts with enrichment.
    Versions 15 and later
    The HTML edit control is now available in WINDEV.
    New in version 15
    The HTML edit control is now available in WINDEV.
    The HTML edit control is now available in WINDEV.
    A toolbar automatically appears above the control in order to implement the enrichment (links, bold, italic, ...). To enter an image in this type of control, you must specify the address of the image. The links found in the control cannot be directly checked by the user. The links will be effective if the content of the HTML text control is displayed in an HTML control.
    See Handling an edit control in HTML format for more details.
  • Password: when typing information, all the characters will be replaced by stars on the screen.
    Versions 18 and later
    WINDEV The user now has the ability to check the password entered (AAF). See Showing a password in clear (AAF) for more details.
    New in version 18
    WINDEV The user now has the ability to check the password entered (AAF). See Showing a password in clear (AAF) for more details.
    WINDEV The user now has the ability to check the password entered (AAF). See Showing a password in clear (AAF) for more details.
  • Numeric to display or enter a numeric value (weight, ...). The "+++" characters are displayed if the control is not large enough to display the entire number.
  • Currency to display or enter currency values.
  • Currency + Euro to manage prices for example.
    AndroidUniversal Windows 10 App This type of edit control is not available.
    Versions 17 and later
    WINDEV The numeric, currency and Currency + Euro edit controls can display a calculator button allowing the user to perform a calculation ("Display the calculator button" option). Several AAFs (Automatic Application Features) are available for this type of control (modifying the value via the mouse wheel for example). See AAF for the numeric controls for more details.
    New in version 17
    WINDEV The numeric, currency and Currency + Euro edit controls can display a calculator button allowing the user to perform a calculation ("Display the calculator button" option). Several AAFs (Automatic Application Features) are available for this type of control (modifying the value via the mouse wheel for example). See AAF for the numeric controls for more details.
    WINDEV The numeric, currency and Currency + Euro edit controls can display a calculator button allowing the user to perform a calculation ("Display the calculator button" option). Several AAFs (Automatic Application Features) are available for this type of control (modifying the value via the mouse wheel for example). See AAF for the numeric controls for more details.
  • Date to display or enter dates.
    WINDEVWindows Mobile The user will be able to press the "+" and "-" keys on the numeric keyboard to modify the date.
    If the control is not found in a popup, you have the ability to display a calendar button allowing the user to type the date ("Display a calendar button" option). In this case, you have the ability to define the characteristics of the calendar.
    WINDEV AAF (Automatic Application Feature): If the Calendar button is not displayed, the user will still be able to enter a date in a calendar ("Calendar" from the popup menu of control). To delete this AAF, use DisableAAF associated with the aafCalendar constant. See AAF for the Date controls for more details. WINDEV AAF (Automatic Application Feature): If the Calendar button is not displayed, the user will still be able to enter a date in a calendar ("Calendar" from the popup menu of control). To delete this AAF, use AAFDisable (or DisableAAF) associated with the aafCalendar constant. See AAF for the Date controls for more details.
    Versions 17 and later
    AndroidiPhone/iPad To allow a date to be selected via the roll, the type of the input mask must be:
    • AndroidiPhone/iPad "Date roll",
    • iPhone/iPad "Date and Time roll".
    New in version 17
    AndroidiPhone/iPad To allow a date to be selected via the roll, the type of the input mask must be:
    • AndroidiPhone/iPad "Date roll",
    • iPhone/iPad "Date and Time roll".
    AndroidiPhone/iPad To allow a date to be selected via the roll, the type of the input mask must be:
    • AndroidiPhone/iPad "Date roll",
    • iPhone/iPad "Date and Time roll".
  • Time to display or enter times.
    Versions 17 and later
    AndroidiPhone/iPad To allow a time to be selected via the time picker, you must use the "TimePicker" input mask.
    New in version 17
    AndroidiPhone/iPad To allow a time to be selected via the time picker, you must use the "TimePicker" input mask.
    AndroidiPhone/iPad To allow a time to be selected via the time picker, you must use the "TimePicker" input mask.
  • Duration to display or enter durations.
    Versions 17 and later
    AndroidiPhone/iPad To allow a duration to be selected via the duration picker, you must use the "DurationPicker" input mask.
    New in version 17
    AndroidiPhone/iPad To allow a duration to be selected via the duration picker, you must use the "DurationPicker" input mask.
    AndroidiPhone/iPad To allow a duration to be selected via the duration picker, you must use the "DurationPicker" input mask.
  • 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. See Multilingual feature in the controls for more details.
These input masks can be modified by programming with ..InputMask.
Versions 17 and later
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.
New in version 17
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.
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.
Versions 17 and later
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: "JJ/MM/AAAA".
  • the display mask: "DDDD DD MMMM YYYY" (corresponding to the spelled out date).
The display masks can be multilingual and they can be modified by programming with ..DisplayMask.
New in version 17
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: "JJ/MM/AAAA".
  • the display mask: "DDDD DD MMMM YYYY" (corresponding to the spelled out date).
The display masks can be multilingual and they can be modified by programming with ..DisplayMask.
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: "JJ/MM/AAAA".
  • the display mask: "DDDD DD MMMM YYYY" (corresponding to the spelled out date).
The display masks can be multilingual and they can be modified by programming with ..DisplayMask.
WINDEVWEBDEV - Server codeiPhone/iPadWindows Mobile

Displaying an indication text in an edit control

The information text is used to display a help text in the empty edit control. This help text is automatically erased as soon as the user types the first character in the control.
Example of tooltip
This indication text is available for:
  • the text edit controls.
  • WINDEViPhone/iPadWindows Mobile the Numeric, Currency and Currency + Euro edit controls.
    In order for the indication text to be displayed in the Numeric, Currency or Currency + Euro edit controls, the option "Reset if 0" must be checked ("Details" tab of control description).
    You can also display the lower bound and the upper bound of the numeric edit control:
    • in the indication text ("Display the bounds in the indication text" in the "Details" tab of control description).
    • in the control tooltip ("Display the bounds in the tooltip" option in the "Details" tab of control description).
The help text can be typed:
  • in the description window of the edit control ("Help" tab in WINDEV/WINDEV Mobile and "Content" tab in WEBDEV).
  • by programming with ..Hint.
WINDEViPhone/iPadWindows Mobile The style of the indication 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, all you have to do is select the "Indication text" element and check "Customize the style of the indication text".
Versions 22 and later
..HintTextColor is used to find out and modify the color of information text by programming.
New in version 22
..HintTextColor is used to find out and modify the color of information text by programming.
..HintTextColor is used to find out and modify the color of information text by programming.
WEBDEV - Server code The style of the information text corresponds to the style of input area, in italic and gray.
WINDEVWindows MobileJava

Other important characteristics

An edit control can be:
  • WINDEV used to perform a "Drag and Drop". See Managing Drag and Drop for more details.
  • WINDEVWindowsWindows Mobile in assisted input: When the input is performed in the control, the application automatically proposes the corresponding value found in the HFSQL key item linked to the control.
    For example, in the "City" control, "London" is automatically proposed once "Lo" was typed.
    The assisted input operates on the key items and on the Text items only.
    The assisted input does not operate on the non-key items, on the numeric items, and if an input mask is used for the dates. See Assisted input in an edit control for more details
An edit control can also propose:
  • WINDEVWindows a spelling checker that is using the OpenOffice dictionary installed on the computer or a spelling and grammatical checker that is using the Word dictionary.
  • WINDEVWindowsWindows Mobile a history of inputs: When the input is performed in the control, the list of values previously entered in the control will be automatically proposed. This history of inputs is not proposed for the multiline controls. See Storing the input performed (AAF) for more details.
  • Versions 15 and later
    WINDEV help during the input of file path. This option is used to propose the different directories and files accessible when typing a file name with its path. This option is not available if the assisted input is proposed for the control.
    New in version 15
    WINDEV help during the input of file path. This option is used to propose the different directories and files accessible when typing a file name with its path. This option is not available if the assisted input is proposed for the control.
    WINDEV help during the input of file path. This option is used to propose the different directories and files accessible when typing a file name with its path. This option is not available if the assisted input is proposed for the control.
Windows Mobile An edit control can also:
  • enable the keyboard in edit: when the input is performed in the control, the keyboard will be automatically displayed on the Pocket PC. This option is found in the "Details" tab of the description window of the control.
  • be in Smartphone mode: the size of the control is automatically optimized when it is displayed in a Smartphone. See Smartphone mode for more details.
To display the control characteristics, select "Description" from the popup menu of control.
Versions 17 and later
Android

Customizing the alphanumeric keypad

In the Android applications, an alphabetical keyboard is automatically displayed during the input in a text control. This keyboard allows the user to type the requested text.
This keyboard includes a button (bottom right) that can be customized:
To configure this button:
  1. Display the "Details" tab of the description window of the Edit control.
  2. In the "Keyboard button", select the requested type of button. Depending on the selected type, the system will display the corresponding button in the current language on the device.
  3. Validate.
The process associated with this button can be entered in the code editor. It corresponds to the optional "Validation via keyboard" process. See Processes associated with the edit control for more details.
Versions 18 and later
Android This feature is now available for the Android applications.
New in version 18
Android This feature is now available for the Android applications.
Android This feature is now available for the Android applications.
New in version 17
Android

Customizing the alphanumeric keypad

In the Android applications, an alphabetical keyboard is automatically displayed during the input in a text control. This keyboard allows the user to type the requested text.
This keyboard includes a button (bottom right) that can be customized:
To configure this button:
  1. Display the "Details" tab of the description window of the Edit control.
  2. In the "Keyboard button", select the requested type of button. Depending on the selected type, the system will display the corresponding button in the current language on the device.
  3. Validate.
The process associated with this button can be entered in the code editor. It corresponds to the optional "Validation via keyboard" process. See Processes associated with the edit control for more details.
Versions 18 and later
Android This feature is now available for the Android applications.
New in version 18
Android This feature is now available for the Android applications.
Android This feature is now available for the Android applications.
Android

Customizing the alphanumeric keypad

In the Android applications, an alphabetical keyboard is automatically displayed during the input in a text control. This keyboard allows the user to type the requested text.
This keyboard includes a button (bottom right) that can be customized:
To configure this button:
  1. Display the "Details" tab of the description window of the Edit control.
  2. In the "Keyboard button", select the requested type of button. Depending on the selected type, the system will display the corresponding button in the current language on the device.
  3. Validate.
The process associated with this button can be entered in the code editor. It corresponds to the optional "Validation via keyboard" process. See Processes associated with the edit control for more details.
Versions 18 and later
Android This feature is now available for the Android applications.
New in version 18
Android This feature is now available for the Android applications.
Android This feature is now available for the Android applications.
WEBDEV - Server code

Validation of edit controls via the Enter key

For each edit control found in a page, you have the ability to specify the action that will be run when the ENTER key is pressed by the Web user.
This allows you to improve the default processes in a page. For example, several search controls can be found 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 with focus.
To define the action associated with an edit control:
  1. In your page, create a button containing the requested code.
  2. Display the description of the edit control. In the "Details" tab, select the requested button in the "Validation button" option.
Versions 17 and later
WEBDEV - Server code

Specific HTML 5 features

Some characteristics of the edit controls use HTML 5 features:
  • Input masks. By choosing an HTML 5 input mask, the site leaves the management of input and its check to the browser. It is not the page (the site) that performs the checks, but the browser itself. It is always possible to run a WLanguage code when exiting from a control, allowing additional checks to be performed on the data entered. These features are available only for some browsers, from the following versions: Firefox 5, Chrome 12, Opera 11, Safari 5, ...
    See the help about the input masks of text, numeric, date and time controls for more details.
  • HTML 5 search control: If this option is selected for a text control, the browser will display a cross 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 description window of the control.
    Caution: This option is taken into account only on browsers supporting HTML 5, notably Chrome 12 and Safari 5.
  • Automatic completion: This option (found in the "Details" tab of the description window of the control) is used to enable (or not) the automatic completion on the edit controls. The auto-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.
    Auto-complete is a dangerous feature, which should be disabled for confidential data.
    This property is supported by most browsers that support HTML 5 (Firefox, Chrome, Safari, Opera, ...).
New in version 17
WEBDEV - Server code

Specific HTML 5 features

Some characteristics of the edit controls use HTML 5 features:
  • Input masks. By choosing an HTML 5 input mask, the site leaves the management of input and its check to the browser. It is not the page (the site) that performs the checks, but the browser itself. It is always possible to run a WLanguage code when exiting from a control, allowing additional checks to be performed on the data entered. These features are available only for some browsers, from the following versions: Firefox 5, Chrome 12, Opera 11, Safari 5, ...
    See the help about the input masks of text, numeric, date and time controls for more details.
  • HTML 5 search control: If this option is selected for a text control, the browser will display a cross 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 description window of the control.
    Caution: This option is taken into account only on browsers supporting HTML 5, notably Chrome 12 and Safari 5.
  • Automatic completion: This option (found in the "Details" tab of the description window of the control) is used to enable (or not) the automatic completion on the edit controls. The auto-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.
    Auto-complete is a dangerous feature, which should be disabled for confidential data.
    This property is supported by most browsers that support HTML 5 (Firefox, Chrome, Safari, Opera, ...).
WEBDEV - Server code

Specific HTML 5 features

Some characteristics of the edit controls use HTML 5 features:
  • Input masks. By choosing an HTML 5 input mask, the site leaves the management of input and its check to the browser. It is not the page (the site) that performs the checks, but the browser itself. It is always possible to run a WLanguage code when exiting from a control, allowing additional checks to be performed on the data entered. These features are available only for some browsers, from the following versions: Firefox 5, Chrome 12, Opera 11, Safari 5, ...
    See the help about the input masks of text, numeric, date and time controls for more details.
  • HTML 5 search control: If this option is selected for a text control, the browser will display a cross 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 description window of the control.
    Caution: This option is taken into account only on browsers supporting HTML 5, notably Chrome 12 and Safari 5.
  • Automatic completion: This option (found in the "Details" tab of the description window of the control) is used to enable (or not) the automatic completion on the edit controls. The auto-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.
    Auto-complete is a dangerous feature, which should be disabled for confidential data.
    This property is supported by most browsers that support HTML 5 (Firefox, Chrome, Safari, Opera, ...).
Swap
Versions 20 and later
WINDEVAndroidiPhone/iPadWindows MobileUniversal Windows 10 AppJava WINDEV and WINDEV Mobile allow you to automatically transform an edit control into several static controls:
  1. Select the edit control to transform.
  2. On the "Modification" pane, in the "Transformations" group, expand "Refactoring and swapping" and select "Edit control to Statics".
A static control is automatically created for the caption of the edit control and also for the input area.
New in version 20
WINDEVAndroidiPhone/iPadWindows MobileUniversal Windows 10 AppJava WINDEV and WINDEV Mobile allow you to automatically transform an edit control into several static controls:
  1. Select the edit control to transform.
  2. On the "Modification" pane, in the "Transformations" group, expand "Refactoring and swapping" and select "Edit control to Statics".
A static control is automatically created for the caption of the edit control and also for the input area.
WINDEVAndroidiPhone/iPadWindows MobileUniversal Windows 10 AppJava WINDEV and WINDEV Mobile allow you to automatically transform an edit control into several static controls:
  1. Select the edit control to transform.
  2. On the "Modification" pane, in the "Transformations" group, expand "Refactoring and swapping" and select "Edit control to Statics".
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 RTF edit control Unit examples (WINDEV Mobile): The RTF edit control
[ + ] Using text in RTF format in the edit controls.
This format is very useful to format and view data.
The special characters Unit examples (WINDEV): The special characters
[ + ] Handling special characters in an RTF control and viewing the ASCII and ANSI codes.
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 required version
  • Version 9
This page is also available for…
Comments
Click [Add] to post a comment