AppTextInput

A single-line TextInput with a given placeholder text (deprecated). More...

Import Statement: import VPlayApps 1.0
Inherits:

TextInput

Properties

Detailed Description

Note: AppTextInput is deprecated, please use AppTextField instead.

AppTextInput is an extension of the basic QML TextInput for getting single-line text input from the user. For multi-line text input, use AppTextEdit.

It adds the ability to display a placeholder text, which is visible as long as the text field is empty. The placeholder text's color and text can be configured using placeholderText and placeholderColor properties.

How do I set a placeholder for the text field?

Input controls like AppTextInput or AppTextField own a placeHolderText property, which you can use for your placeholder text.

 import VPlayApps 1.0
 import QtQuick 2.0

 App {
   Page {

     // remove focus from textedit if background is clicked
     MouseArea {
       anchors.fill: parent
       onClicked: textEdit.focus = false
     }

     // background for input
     Rectangle {
       anchors.fill: textEdit
       anchors.margins: -dp(8)
       color: "lightgrey"
     }

     // input
     AppTextInput {
       id: textEdit
       width: dp(200)
       placeholderText: "What's your name?"
       anchors.centerIn: parent
     }
   }
 }

How do I show validation errors?

The text input components provide predefined validators that you can use, they are called inputMethodHints.

You can also add custom validators to restrict the accepted input to a certain input type or expression. Input that does not match the validator is not accepted. To do custom validations and show errors for accepted input, you can add simple checks and control the visibility of errors with property bindings:

 import VPlayApps 1.0
 import QtQuick 2.0

 App {
   // background for input
   Rectangle {
     anchors.fill: textInput
     anchors.margins: -dp(8)
     color: "lightgrey"
   }

   // input
   AppTextInput {
     id: textInput
     width: dp(200)
     placeholderText: "What's your name?"
     anchors.centerIn: parent

     // only allow letters and check length
     validator: RegExpValidator {
       regExp: /[A-Za-z]+/
     }
     property bool isTooLong: textInput.text.length >= 6
   }

   // show error if too long
   AppText {
     text: "Error: Use less than 6 letters."
     color: "red"
     anchors.top: textInput.bottom
     anchors.topMargin: dp(16)
     anchors.left: textInput.left
     visible: textInput.isTooLong
   }
 }

More Frequently Asked Development Questions

Find more examples for frequently asked development questions and important concepts in the following guides:

Property Documentation

cursorColor : color

The color of the cursor that marks the current position in the text input. Matches Theme::inputCursorColor by default.

This QML property was introduced in V-Play 2.7.0.


fontSize : int

Set a device-independent font size. It uses the App::sp() function internally. If you set font.pixelSize directly, this property will have no effect.

By default, the fontSize is 18 on Android and 17 on all other platforms.

This QML property was introduced in V-Play 2.17.0.


placeHolderText : string

The text to display as placeholder, when the text field is empty.

This QML property was introduced in V-Play 2.7.0.


placeholderColor : color

The color for the placeholder text.

The default value is Theme::placeholderTextColor.

This QML property was introduced in V-Play 2.7.0.


placeholderText : alias

The text to display as placeholder, when the text field is empty.

This QML property was introduced in V-Play 2.7.0.


Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support