Placeholder text in QML TextEdit

Question

I am looking for a way to show a text hint stating the expected input as advice for the user. Take the Google search bar for example:

Is there a property I am missing, or is this something that has to be achieved through scripting?

score 23 · Accepted Answer · answered Nov 01 '16 at 09:57

The property doesn't exist on the Qt Quick input items. You can vote for the feature here.

In the meantime, you can use TextArea from Qt Quick Controls 2.

If you would rather use pure Qt Quick, you can do something similar to what the Controls do and add a Text item above the field:

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    width: 300
    height: 300
    visible: true

    TextEdit {
        id: textEdit
        width: 200
        height: 50

        property string placeholderText: "Enter text here..."

        Text {
            text: textEdit.placeholderText
            color: "#aaa"
            visible: !textEdit.text
        }
    }
}

[`TextField`](http://doc.qt.io/qt-5/qml-qtquick-controls-textfield.htm) from Qt Quick Controls 1 also does that. — GrecKo, Nov 02 '16 at 09:08

score 5 · Answer 2 · edited Sep 11 '18 at 21:10

This is kinda old but I found another necessity for Android builds. Since Android only send the text editing signal after you press ok in virtual keyboard, the placeholder remains there. So to avoid it, I recommend:

TextEdit {
    id: textEdit
    width: 200
    height: 50

    property string placeholderText: "Enter text here..."

    Text {
        text: textEdit.placeholderText
        color: "#aaa"
        visible: !textEdit.text && !textEdit.activeFocus // <----------- ;-)
    }
}

score 2 · Answer 3 · edited Oct 03 '22 at 08:53

2

If you want one line input then why not use TextField ?

edited Oct 03 '22 at 08:53

Jarod42

203,559
14
181
302

answered Sep 03 '20 at 18:58

너를 속였다

899
11
26

Placeholder text in QML TextEdit

3 Answers3