QML TextField Element

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

This element was introduced in Qt Quick Components 1.0.

• List of all members, including inherited members

Properties

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

Methods

• closeSoftwareInputPanel
• copy
• cut
• openSoftwareInputPanel
• 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.

TextField Basic Examples

The code examples below illustrate various features of TextField.

 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

The examples below illustrate various TextField selection features in Symbian. Different options become available when the user selects a piece of text.

Custom buttons to TextField

This section shows examples how to add a custom button and operations into a TextField component.

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