The TextEdit control is used every time the user must input information which is not chosen from a predetermined list. This control can be used for entering both short and long texts as well as for entering passwords without displaying them on screen.


textedit32.png Key properties: Text, IsPassword, Data Field
Key events:
Server Code: TextEdit = Class(TWebControl)
Browser Code: TextEdit = Class(TWebControl)


Graphical States

States Appearance Description
Normal textedit-normal-style.png The default state for the control when no other state is active.
Mouseover textedit-mouseover-style.png This view is displayed when the user moves the cursor over the control
Disabled textedit-disabled-style.png This view is displayed when the control's ability to receive input is disabled.
Focused textedit-focused-style.png This view is only displayed when the control is the Active control.


Learn more about Morfik Styles and Themes.

Layout

Edit.jpg
'

Properties

Property Description
Alignment The Alignment property is used to align the Caption text with the left, right, or center of the Control.
Border Color The BorderColor property specifies the color that should be used for drawing a rectangular border around the Control. Note: the border will not be visible unless the BorderStyle and BorderWidth properties are also set.
Border Sides The BorderSides property specifies the parts of a control's border that are displayed.
Border Style The BorderStyle property of the control defines how and if a border will be drawn around the control.
Border width The Border Width property specifies the line width used to draw the rectangular border around the Control. Note: the border will not be visible unless the BorderColor and BorderStyle properties are also set.
Char Case This property specifies whether the text will be converted to lower case, to upper case or not converted.
Color The Color property specifies the background color of the Control.
Cursor The Cursor property, if set, causes the appearance of the mouse cursor to change as it moves over the Control.
Data Field The DataField property is used to bind the Control to a database field. Either through a table or a query which is specified through the DataSource property of the Form that contains the control.
Empty Char This property specifies what character will replace the Mask Empty Char in the Text property.
Empty Text This property specifies the string that will be displayed when the Text property has no value.
Enabled If the Enabled property is set to false, the Control's state or value cannot be changed by the user.

Note For Timer Control: This property controls whether the Timer event will be triggered at the time interval specified in the Interval property. If the Enabled property is set to false, the Timer event will not be triggered.

Font The Font property (and its sub-properties Color and Name) is used to indicate which font should be used for drawing the text in the Control.
Format Currently not supported for TextEdit
Height The Height property specifies the vertical extent of the Control. Note: if the CanGrow or CanShrink properties are set, the actual height of the Control at run time may be different.
Hint The Hint property, if set, specifies the text of a tooltip that is displayed when the user moves the cursor over the control.
Horizontal Placement The HorizontalPlacement property, if set, governs how the Control adjusts its size and position in response to changes in the horizontal dimensions of its parent.
IsPassword The IsPassword property, when set to true, will cause the TextEdit control to display asterisks on the screen in place of the actual characters which are input by the user. As the name suggests this property should be used whenever the TextEdit control will be used for entering a password.
Left The Left property specifies the horizontal position of the Control in the form.
Margins The Margins property clears an area around control (outside its border).
Mask The property specifies the input mask to be used when entering data into the text box.
Mask Empty Char This property specifies the character that will display in a text field in place of any mask characters in the Mask property.
Max Length The MaxLength property specifies the maximum number of characters that the user can enter in a textedit control.
Multi Line If the MultiLine property is enabled, and the Text contains line breaks, it will be displayed over multiple lines; otherwise, the Text is displayed on a single line. Note: if automatic wrapping of the Text is desired, the WordWrap property must also be enabled.
Name The Name property specifies the identifier used to reference the control from browser- or server-side code.
Opacity The Opacity property determines the extent to which the Control obscures any controls placed in its background. A value of 0 means that background controls are fully visible, whereas a value of 100 means that background controls are completely obscured.
Padding The Padding property specifies the space between the border and the content of the editor.
Read Only If the ReadOnly property is enabled, the user is able to select, but not modify, the content of the TextEdit.
Select On Focus The SelectOnFocus property specifies if the text inside TextEdit control gets automatically selected when that control receives focus.
Shared Style The SharedStyle property can be used to force several controls always have the same appearance.
Tab Order The TabOrder property allows the developer to specify the order in which controls should receive input focus when the user steps through them using the tab key.
Tag The Tag property is used to store user data that is associated with the control.
Text The Text property for the control allows direct access for setting or reading the text that is currently in the control. This property can be bound to a database table field as to automatically display its contents and allow editing of them.
Top The Top property specifies the vertical position of the Control in the form.
Vertical Placement The VerticalPlacement property, if set, governs how the Rectangle adjusts its size and position in response to changes in the vertical dimensions of its parent.
Visible The visible property is used to make controls visible or invisible. Invisible controls are frequently used to allow for easy access to information from a database table field, if the control is bound to one.
Width The Width property specifies the horizontal extent of the Form/control.
Word Wrap The WordWrap property determines whether the Caption text wraps around to the following line(s), if it is too long to fit on a single line.

Events (browser-side)

Event Description
On Blur Event This event is fired within the browser when a control loses focus either by the pointing device or by tabbing navigation.
On Change This event is fired within the browser after the text in the control was changed by the user. Note: this event is not fired until the control loses keyboard focus.
On Click The most commonly used event for a TextLabel control is the OnClick event, which should be handled to execute whatever action is intended when a control is clicked.
On Double Click This event is fired when the user clicks on a control within the browser.
On Focus This event is fired within the browser when a control receives focus either by the pointing device or by tabbing navigation.
On Key Down This event is fired within the browser when a key is pressed down.
On Key Up This event is fired within the browser when a key is released.
On Mouse Down This event is fired within the browser when the mouse button, or any other pointing device button, is pressed while it is over a control. On a PC-based mouse, it specifically relates to the left-hand mouse button being depressed.
On Mouse Out This event is fired when the mouse pointer, or any other pointing device button, is moved out of the region defined by a control.
On Mouse Over This event is fired when the mouse pointer or any other pointing device is over (within the region defined by) a control.
On Mouse Up This event is fired within the browser when the mouse button, or any other pointing device button, is released over a control. On a PC-based mouse, it specifically relates to when the left-hand mouse button is being released.
On After Pushed Or Pulled This event is fired within the browser after the position of a control has changed in response to a change in the content of a sibling control.
On Before Pushed Or Pulled This event is fired within the browser before the position of a control is changed in response to a change in the content of a sibling control.

   

Events (server-side)

Event Description
On After Print This event is fired on the server by a Control after its HTML (or in the case of Report generation, PDF) content is generated.
On Before Print This event is fired by a control on the server before control’s HTML (or in the case of Report generation, PDF) content is generated.
On Print Style This event is fired on the server to allow for CSS style changes when the HTML representation of a control is being constructed.

   

Remarks

Data Binding

Use Data Field property to bound TextEdit control to the data source allowing to display or edit information associated with a field in the Data Source.

Input validation

Edit control is often used in the registration forms when user is expected to fill some personal information. If information appears to be incorrect or missing, it's highly desirable to give a visual feedback about the problem. There are two methods in the Framework allowing to display and clear validation errors associated with TextEdit control, here is example of how they can be used.

Syntax

FX Code

  If TextEditPassword.Text = '' Then
    SetInvalidInputState(textEditPassword, 'Invalid password')
  Else
    ClearInvalidInputState(textEditPassword);


Disabling certain keys

You may want to control what keys are allowed when the user enters the text. For example, if the TextEdit is used to enter a currency amount you can disable every key except for digits and '.' character. While the full implementation of input masks might require some additional coding, here is an example that should get you started. Here is how you can disable key 'A' in your input field:

FX Code

Function Index.AcceptChar(C : Char) : Boolean;
Begin
    Result := True;
 
    Case C Of
        'a', 'A' : Result := False;
    End;
End;
 
Procedure Index.TextEdit1KeyDown(Event: TDOMEvent);
Begin
    If Not AcceptChar(event.keyCode.toInteger.toChar) Then
    Begin
        If Assigned(Event.PreventDefault) Then
            Event.PreventDefault;
 
        CancelEventBubble(Event);
    End;
End;
 
Function Index.HandleKeyPress(Event : TDOMEvent) : Boolean;
Begin
    If Not AcceptChar(event.keyCode.toInteger.toChar) Then
    Begin
        If Assigned(Event.PreventDefault) Then
            Event.PreventDefault;
 
        CancelEventBubble(Event);
        Result := False;
    End;
End;
 
Procedure Index.WebFormReady(Var Ready: Boolean);
Begin
    If Not Browser.IsGecko Then
        TextEdit1.DOMHandleArray.AttachEventHandler('keypress',getMethodPointer(Self, @HandleKeyPress));
End;

Related Topics