QML TextField Element

Provides a component for editing and displaying a single line of plain text. More...

Properties

• acceptableInput : bool
• cursorPosition : int
• echoMode : int
• enabled : bool
• errorHighlight : bool
• font : font
• inputMask : string
• inputMethodHints : int
• maximumLength : int
• placeholderText : string
• platformLeftMargin : real
• platformRightMargin : real
• readOnly : bool
• selectedText : string
• selectionEnd : int
• selectionStart : int
• text : string
• validator : validator

Methods

• copy
• cut
• paste
• positionAt
• positionToRectangle
• select
• selectAll
• selectWord

Detailed Description

The TextField component displays a single line of editable plain text. You can place input constraints for a TextField component, for example, through a validator or inputMask. You can also set echoMode to an appropriate value for making the TextField suitable for a password input field. If the text content is longer than the TextField view port, the user can scroll the field horizontally. TextField is a superset of TextInput and it implements the Symbian-style look-and-feel. The clipboard support is provided by the cut(), copy(), and paste() functions.

Note: Copy-Paste between a qt-components application and native Symbian application does not work. For more information, see QTBUG-5701.

TextField Basic Examples

 TextField {
     width: 160
 }

 TextField {
     width: 160
     placeholderText: "Enter Text Here"
 }

 TextField {
     width: 160
     text: "TextField"
 }

 TextField {
     width: 160
     text: "TextField"
     focus: true
 }

 TextField {
     width: 160
     text: "Text Field Text Field Text Field Text Field Text Field Text Field."
 }

 TextField {
     width: 160
     text: "TextField"
     readOnly: true
 }

 TextField {
     width: 160
     text: "TextField"
     enabled: false
 }

 TextField {
     width: 160
     text: "TextField"
     validator: IntValidator{bottom: 0; top: 100}
 }

 TextField {
     width: 160
     text: "TextField"
     errorHighlight: true
 }

 TextField {
     width: 160
     text: "TextField"
     echoMode: TextInput.Password
 }

TextField Selection in Symbian

Different options become available when a selecting a piece of text.

TextField Behaviors

Different user actions trigger different TextField responses during certain scenarios. As well, touch actions trigger different responses than keyboard actions. Further, responses depend on whether the TextField is marked as readOnly.

Touch Interaction

This table summarizes the Symbian TextField behaviors for editable text for touch interaction.

Read-Only Touch Interaction

This table summarizes the Symbian TextField behaviors for non-editable text for touch interaction.

Keyboard Interaction

This table summarizes the Symbian TextField behaviors for editable text for keyboard interaction.

Currently copy-paste-cut shortcuts don't work on Symbian see QTBUG-5730

Read-Only Keyboard Interaction

This table summarizes the Symbian TextField behaviors for editable text for keyboard interaction.

Custom buttons to TextField

The following section shows exmaples how to add custom button/operations over TextField component using platformLeftMargin / platformRightMargin.

TextField with Clear Button

 TextField {
     id: clearable
     text: "Clearable TextField"
     platformRightMargin: clearText.width + platformStyle.paddingMedium * 2
     width: 210

     Image {
         anchors { top: parent.top; right: parent.right; margins: platformStyle.paddingMedium }
         id: clearText
         fillMode: Image.PreserveAspectFit
         smooth: true; visible: clearable.text
         source: "clear.svg"
         height: parent.height - platformStyle.paddingMedium * 2
         width: parent.height - platformStyle.paddingMedium * 2

         MouseArea {
             id: clear
             anchors { horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter }
             height: clearable.height; width: clearable.height
             onClicked: {
                 clearable.text = ""
                 clearable.forceActiveFocus()
             }
         }
     }
 }

TextField with Custom Operation

 TextField {
     id: customOperation
     placeholderText: "Custom operation"
     platformRightMargin: addText.width + platformStyle.paddingMedium
     width: 260

     Image {
         id: addText
         anchors { top: parent.top; right: parent.right }
         smooth: true
         fillMode: Image.PreserveAspectFit
         source: "add.svg"
         height: parent.height; width: parent.height

         MouseArea {
             id: add
             anchors.fill: parent
             onClicked: textSelection.open()
         }

         SelectionDialog {
             id: textSelection
             titleText: "Preset Texts"
             selectedIndex: -1
             model: ListModel {
                 ListElement { name: "Lorem ipsum." }
                 ListElement { name: "Lorem ipsum dolor." }
                 ListElement { name: "Lorem ipsum dolor sit." }
             }

             onAccepted: {
                 customOperation.text = textSelection.model.get(textSelection.selectedIndex).name
                 customOperation.forceActiveFocus()
             }

             onRejected: selectedIndex = -1
         }
     }
 }

TextField with Search

 TextField {
     id: searchOperation
     text: "Search..."
     platformLeftMargin: search.width + platformStyle.paddingSmall
     width: 150

     Image {
         id: search
         anchors { top: parent.top; left: parent.left; margins: platformStyle.paddingMedium }
         smooth: true
         fillMode: Image.PreserveAspectFit
         source: "search.svg"
         height: parent.height - platformStyle.paddingMedium * 2
         width: parent.height - platformStyle.paddingMedium * 2
     }
 }

Property Documentation

Method Documentation