# TextArea QML Type

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

Import Statement: | import Lomiri.Components 1.3

- List of all members, including inherited members
- Obsolete members

## Properties

- autoSize : bool
- baseUrl : url
- canPaste : bool
- canRedo : bool
- canUndo : bool
- color : color
- contentHeight : real
- contentWidth : real
- cursorDelegate : Component
- cursorPosition : int
- cursorRectangle : rectangle
- cursorVisible : bool
- displayText : string
- effectiveHorizontalAlignment : enumeration
- font : font
- highlighted : bool
- horizontalAlignment : enumeration
- inputMethodComposing : bool
- inputMethodHints : enumeration
- length : int
- lineCount : int
- maximumLineCount : int
- mouseSelectionMode : enumeration
- paintedHeight : real
- paintedWidth : real
- persistentSelection : bool
- placeholderText : string
- popover : var
- readOnly : bool
- renderType : enumeration
- selectByMouse : bool
- selectedText : string
- selectedTextColor : color
- selectionColor : color
- selectionEnd : int
- selectionStart : int
- text : string
- textDocument : var
- textFormat : enumeration
- verticalAlignment : enumeration
- wrapMode : enumeration

## Signals

- linkActivated(string)
- linkActivated(string)

## Methods

- append(text)
- append(text)
- copy()
- copy()
- cut()
- cut()
- deselect()
- deselect()
- getFormattedText(start, end)
- getFormattedText(start, end)
- getText(start, end)
- getText(start, end)
- insert(position, text)
- insert(position, text)
- isRightToLeft(start, end)
- isRightToLeft(start, end)
- moveCursorSelection(position, mode)
- moveCursorSelection(position, mode)
- paste(data)
- paste(data)
- positionAt(x, y)
- positionAt(x, y)
- positionToRectangle(position)
- positionToRectangle(position)
- redo()
- redo()
- remove(start, end)
- remove(start, end)
- select(start, end)
- select(start, end)
- selectAll()
- selectAll()
- selectWord()
- selectWord()
- undo()
- undo()

## 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 and text selection

The input is activated when the tap or mouse is released after being pressed over the component.

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 content can be selected in the following ways:

- - double tapping/left mouse clicking over the content, when the word that had been tapped over will be selected
- - by pressing and dragging the selection cursor over the text input. Note that there has to be a delay of approx. 200 ms between the press and drag gesture, time when the input switches from scroll mode to selection mode

The input is focused (activated) upon tap/left mouse button release. The cursor will be placed at the position the mouse/tap point at release time. If the click is happening on a selected area, the selection will be cleared. Long press above a selected area brings up the clipboard context menu. When the long press happens over a non-selected area, the cursor will be moved to the position and the component enters in selection mode. The selection mode can also be activated by tapping and keeping the tap/mouse over for approx 300 ms. If there is a move during this time, the component enters into scrolling mode. The mode is exited once the scrolling finishes. During the scrolling mode the selected text is preserved.

Note: During text selection all interactive parent Flickables are turned off.

## Property Documentation

autoSize : bool

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

baseUrl : url

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 : bool

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

canRedo : bool

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

canUndo : bool

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

color : color

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 : Component

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 : int

The position of the cursor in the TextArea.

cursorRectangle : rectangle

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 : bool

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-only] displayText : string

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 : enumeration

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

font : font

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 : enumeration

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:

- TextEdit.AlignLeft (default)
- TextEdit.AlignRight
- TextEdit.AlignHCenter
- TextEdit.AlignJustify

inputMethodComposing : bool

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 : enumeration

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:

- Qt.ImhHiddenText - Characters should be hidden, as is typically used when entering passwords.
- Qt.ImhSensitiveData - Typed text should not be stored by the active input method in any persistent storage like predictive user dictionary.
- Qt.ImhNoAutoUppercase - The input method should not try to automatically switch to upper case when a sentence ends.
- Qt.ImhPreferNumbers - Numbers are preferred (but not required).
- Qt.ImhPreferUppercase - Upper case letters are preferred (but not required).
- Qt.ImhPreferLowercase - Lower case letters are preferred (but not required).
- Qt.ImhNoPredictiveText - Do not use predictive text (i.e. dictionary lookup) while typing.
- Qt.ImhDate - The text editor functions as a date field.
- Qt.ImhTime - The text editor functions as a time field.

Flags that restrict input (exclusive flags) are:

- Qt.ImhDigitsOnly - Only digits are allowed.
- Qt.ImhFormattedNumbersOnly - Only number input is allowed. This includes decimal point and minus sign.
- Qt.ImhUppercaseOnly - Only upper case letter input is allowed.
- Qt.ImhLowercaseOnly - Only lower case letter input is allowed.
- Qt.ImhDialableCharactersOnly - Only characters suitable for phone dialing are allowed.
- Qt.ImhEmailCharactersOnly - Only characters suitable for email addresses are allowed.
- Qt.ImhUrlCharactersOnly - Only characters suitable for URLs are allowed.

Masks:

- Qt.ImhExclusiveInputMask - This mask yields nonzero if any of the exclusive flags are used.

length : int

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 : int

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 : enumeration

Specifies how text should be selected using a mouse.

- TextEdit.SelectCharacters - The selection is updated with individual characters. (Default)
- TextEdit.SelectWords - The selection is updated with whole words.

This property only applies when selectByMouse is true.

[read-only] paintedHeight : real

Exposes the paintedHeight of the underlying text component. It's required if the application uses its own Flickable for scrolling.

[read-only] paintedWidth : real

Exposes the paintedWidth of the underlying text component. It's required if the application uses its own Flickable for scrolling.

persistentSelection : bool

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 : string

Text that appears when there is no focus and no content in the component (hint text).

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 : bool

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 : enumeration

Override the default rendering type for this component.

Supported render types are:

- Text.QtRendering - the default
- Text.NativeRendering

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 : string

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

selectedTextColor : color

The selected text color, used in selections.

selectionColor : color

The text highlight color, used behind selections.

selectionEnd : int

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 : int

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 : string

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().

textDocument : var

Exposes the QQuickTextDocument which can be used to implement advanced formatting and syntax highlighting (QSyntaxHighlighter) with C++.

textFormat : enumeration

The way the text property should be displayed.

- TextEdit.AutoText
- TextEdit.PlainText
- TextEdit.RichText

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 : enumeration

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:

- TextEdit.AlignTop (default)
- TextEdit.AlignBottom
- TextEdit.AlignVCenter

wrapMode : enumeration

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.

- TextEdit.NoWrap - no wrapping will be performed. If the text contains insufficient newlines, then implicitWidth will exceed a set width.
- TextEdit.WordWrap - wrapping is done on word boundaries only. If a word is too long, implicitWidth will exceed a set width.
- TextEdit.WrapAnywhere - wrapping is done at any point on a line, even if it occurs in the middle of a word.
- TextEdit.Wrap - if possible, wrapping occurs at a word boundary; otherwise it will occur at the appropriate point on the line, even in the middle of a word.

The default is TextEdit.Wrap

## Signal Documentation

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.

Note: The corresponding handler is `onLinkActivated`.

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.

Note: The corresponding handler is `onLinkActivated`.

## Method Documentation

append(text)

Appends a new paragraph with text to the end of the TextArea.

In order to append without inserting a new paragraph, call TextArea.insert(TextArea.length, text) instead.

append(text)

Appends a new paragraph with text to the end of the TextArea.

In order to append without inserting a new paragraph, call TextArea.insert(TextArea.length, text) instead.

copy()

Copies the currently selected text to the system clipboard.

copy()

Copies the currently selected text to the system clipboard.

cut()

Moves the currently selected text to the system clipboard.

cut()

Moves the currently selected text to the system clipboard.

deselect()

Removes active text selection.

deselect()

Removes active text selection.

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.

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.

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.

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.

insert(position, text)

Inserts text into the TextArea at position.

insert(position, text)

Inserts text into the TextArea at position.

isRightToLeft(start, end)

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

isRightToLeft(start, end)

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

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.

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.

paste(data)

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

paste(data)

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

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.

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.

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.

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.

redo()

Redoes the last operation if redo is available.

redo()

Redoes the last operation if redo is available.

remove(start, end)

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

remove(start, end)

Removes the section of text that is between the start and end positions from the 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.

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.

selectAll()

Causes all text to be selected.

selectAll()

Causes all text to be selected.

selectWord()

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

selectWord()

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

undo()

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

undo()

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