Contents

TextArea

The TextArea item displays a block of editable, scrollable, formatted text. More...

Properties

Signals

Methods

Detailed Description

The TextArea supports fix-size and auto-expanding modes. In fix-size mode the content is scrolled when exceeds the boundaries and can be scrolled both horizontally and vertically, depending on the contentWidth and contentHeight set. The following example will scroll the editing area both horizontally and vertically:

TextArea {
    width: units.gu(20)
    height: units.gu(12)
    contentWidth: units.gu(30)
    contentHeight: units.gu(60)
}

The auto-expand mode is realized using two properties: autoSize and maximumLineCount. Setting autoSize will set implicitHeight to one line, and the height will follow the line count, meaning when lines are added the area will expand and when removed the area will shrink. The maximumLineCount specifies how much the editor should be expanded. If this value is set to 0, the area will always expand vertically to fit the content. When autoSize is set, the contentHeight property value is ignored, and the expansion only happens vertically.

TextArea {
    width: units.gu(20)
    height: units.gu(12)
    contentWidth: units.gu(30)
    autoSize: true
    maximumLineCount: 0
}

TextArea comes with 30 grid-units implicit width and one line height on auto-sizing mode and 4 lines on fixed-mode. The line size is calculated from the font size and the ovarlay and frame spacing specified in the style.

Scrolling the editing area can happen when the size is fixed or in auto-sizing mode when the content size is bigger than the visible area. The scrolling is realized by swipe gestures, or by navigating the cursor.

The item enters in selection mode when the user performs a long tap (or long mouse press) or a double tap/press on the text area. The mode is visualized by two selection cursors (pins) which can be used to select the desired text. The text can also be selected by moving the finger/mouse towards the desired area right after entering in selection mode. The way the text is selected is driven by the mouseSelectionMode value, which is either character or word. The editor leaves the selection mode by pressing/tapping again on it or by losing focus.

The default styling uses textarea selector.

This component is under heavy development.

Property Documentation

activeFocusOnPress : bool

Whether the TextArea should gain active focus on a mouse press. By default this is set to true.


autoExpand : bool

This documentation is deprecated.

This property specifies whether the text area expands following the entered text or not. The default value is false. The property is deprecated, use autoSize instead


autoSize : bool

This property specifies whether the text area sizes following the line count or not. The default value is false.


baseUrl : alias

This property specifies a base URL which is used to resolve relative URLs within the text. The default value is the url of the QML file instantiating the TextArea item.


canPaste : alias

Returns true if the TextArea is writable and the content of the clipboard is suitable for pasting into the TextArea.


canRedo : alias

Returns true if the TextArea is writable and there are undone operations that can be redone.


canUndo : alias

Returns true if the TextArea is writable and there are previous operations that can be undone.


color : alias

The text color.


contentHeight : real

The property folds the height of the text editing content. This can be equal or bigger than the frame height minus the spacing between the frame and the input area defined in the current theme. The default value is the same as the visible input area's height.


contentWidth : real

The property folds the width of the text editing content. This can be equal or bigger than the frame width minus the spacing between the frame and the input area defined in the current theme. The default value is the same as the visible input area's width.


cursorDelegate : alias

The delegate for the cursor in the TextArea.

If you set a cursorDelegate for a TextArea, this delegate will be used for drawing the cursor instead of the standard cursor. An instance of the delegate will be created and managed by the text edit when a cursor is needed, and the x and y properties of delegate instance will be set so as to be one pixel before the top left of the current character.

Note that the root item of the delegate component must be a QQuickItem or QQuickItem derived item.


cursorPosition : alias

The position of the cursor in the TextArea.


cursorRectangle : alias

The rectangle where the standard text cursor is rendered within the text edit. Read-only.

The position and height of a custom cursorDelegate are updated to follow the cursorRectangle automatically when it changes. The width of the delegate is unaffected by changes in the cursor rectangle.


cursorVisible : alias

If true the text edit shows a cursor.

This property is set and unset when the text edit gets active focus, but it can also be set directly (useful, for example, if a KeyProxy might forward keys to it).


read-onlydisplayText : alias

This property contains the text that is displayed on the screen. May differ from the text property value when TextEdit.RichText format is selected.


effectiveHorizontalAlignment : alias

Presents the effective horizontal alignment that can be different from the one specified at horizontalAlignment due to layout mirroring.


font : alias

The property holds the font used by the editing.


highlighted : bool

The property presents whether the TextArea is highlighted or not. By default the TextArea gets highlighted when gets the focus, so can accept text input. This property allows to control the highlight separately from the focused behavior.


horizontalAlignment : alias

Sets the horizontal alignment of the text within the TextAre item's width and height. By default, the text alignment follows the natural alignment of the text, for example text that is read from left to right will be aligned to the left.

Valid values for effectiveHorizontalAlignment are:


inputMethodComposing : alias

This property holds whether the TextArea has partial text input from an input method.

While it is composing an input method may rely on mouse or key events from the TextArea to edit or commit the partial text. This property can be used to determine when to disable events handlers that may interfere with the correct operation of an input method.


inputMethodHints : alias

Provides hints to the input method about the expected content of the text edit and how it should operate.

The value is a bit-wise combination of flags or Qt.ImhNone if no hints are set.

Flags that alter behaviour are:

Flags that restrict input (exclusive flags) are:

Masks:


length : alias

Returns the total number of plain text characters in the TextArea item.

As this number doesn't include any formatting markup it may not be the same as the length of the string returned by the text property.

This property can be faster than querying the length the text property as it doesn't require any copying or conversion of the TextArea's internal string data.


lineCount : alias

Returns the total number of lines in the TextArea item.


maximumLineCount : int

The property holds the maximum amount of lines to expand when autoSize is enabled. The value of 0 does not put any upper limit and the control will expand forever.

The default value is 5 lines.


mouseSelectionMode : alias

Specifies how text should be selected using a mouse.

This property only applies when selectByMouse is true.


persistentSelection : alias

Whether the TextArea should keep the selection visible when it loses active focus to another item in the scene. By default this is set to true;


placeholderText : alias

Text that appears when there is no focus and no content in the component (hint text). The hint style can be customized by defining a style selector which styles a label. For example the default styling defines the hint styling using .textarea .label selector.

.textarea .label {
     italic: true;
     color: "#B6B6B6";
     fontSize: "small";
     elide: Text.ElideRight;
     wrapMode: Text.WordWrap;
}

popover : var

The property overrides the default popover of the TextArea. When set, the TextArea will open the given popover instead of the default one defined. The popover can either be a component or a URL to be loaded.


readOnly : alias

Whether the user can interact with the TextArea item. If this property is set to true the text cannot be edited by user interaction.

By default this property is false.


renderType : alias

Override the default rendering type for this component.

Supported render types are:

Select Text.NativeRendering if you prefer text to look native on the target platform and do not require advanced features such as transformation of the text. Using such features in combination with the NativeRendering render type will lend poor and sometimes pixelated results.


selectByMouse : bool

The property drives whether text selection should happen with the mouse or not. The default value is true.


selectedText : alias

This read-only property provides the text currently selected in the text edit.


selectedTextColor : alias

The selected text color, used in selections.


selectionColor : alias

The text highlight color, used behind selections.


selectionEnd : alias

The cursor position after the last character in the current selection.

This property is read-only. To change the selection, use select(start, end), selectAll(), or selectWord().

See also selectionStart, cursorPosition, and selectedText.


selectionStart : alias

The cursor position before the first character in the current selection.

This property is read-only. To change the selection, use select(start, end), selectAll(), or selectWord().

See also selectionEnd, cursorPosition, and selectedText.


text : alias

The text to display. If the text format is AutoText the text edit will automatically determine whether the text should be treated as rich text. This determination is made using Qt::mightBeRichText().


textFormat : alias

The way the text property should be displayed.

The default is TextEdit.PlainText. If the text format is TextEdit.AutoText the text edit will automatically determine whether the text should be treated as rich text. This determination is made using Qt::mightBeRichText().


verticalAlignment : alias

Sets the vertical alignment of the text within the TextAres item's width and height. By default, the text alignment follows the natural alignment of the text.

Valid values for verticalAlignment are:


wrapMode : alias

Set this property to wrap the text to the TextEdit item's width. The text will only wrap if an explicit width has been set.

The default is TextEdit.Wrap


Signal Documentation

TextArea::linkActivated(string link)

This handler is called when the user clicks on a link embedded in the text. The link must be in rich text or HTML format and the link string provides access to the particular link.


Method Documentation

TextArea::copy()

Copies the currently selected text to the system clipboard.


TextArea::cut()

Moves the currently selected text to the system clipboard.


TextArea::deselect()

Removes active text selection.


TextArea::getFormattedText( start, end)

Returns the section of text that is between the start and end positions.

The returned text will be formatted according the textFormat property.


TextArea::getText( start, end)

Returns the section of text that is between the start and end positions.

The returned text does not include any rich text formatting. A getText(0, length) will result in the same value as displayText.


TextArea::insert( position, text)

Inserts text into the TextArea at position.


TextArea::isRightToLeft( start, end)

Returns true if the natural reading direction of the editor text found between positions start and end is right to left.


TextArea::moveCursorSelection( position, mode)

Moves the cursor to position and updates the selection according to the optional mode parameter. (To only move the cursor, set the cursorPosition property.)

When this method is called it additionally sets either the selectionStart or the selectionEnd (whichever was at the previous cursor position) to the specified position. This allows you to easily extend and contract the selected text range.

The selection mode specifies whether the selection is updated on a per character or a per word basis. If not specified the selection mode will default to whatever is given in the mouseSelectionMode property.


TextArea::paste( data)

This documentation is under development and is subject to change.

Places the clipboard or the data given as parameter into the text input. The selected text will be replaces with the data.


TextArea::positionAt( x, y)

Returns the text position closest to pixel position (x, y).

Position 0 is before the first character, position 1 is after the first character but before the second, and so on until position text.length, which is after all characters.


TextArea::positionToRectangle( position)

Returns the rectangle at the given position in the text. The x, y, and height properties correspond to the cursor that would describe that position.


TextArea::redo()

Redoes the last operation if redo is available.


TextArea::remove( start, end)

Removes the section of text that is between the start and end positions from the TextArea.


TextArea::select( start, end)

Causes the text from start to end to be selected.

If either start or end is out of range, the selection is not changed.

After calling this, selectionStart will become the lesser and selectionEnd will become the greater (regardless of the order passed to this method).

See also selectionStart and selectionEnd.


TextArea::selectAll()

Causes all text to be selected.


TextArea::selectWord()

Causes the word closest to the current cursor position to be selected.


TextArea::undo()

Undoes the last operation if undo is available. Deselects any current selection, and updates the selection start to the current cursor position.