Simple TextArea Element in qml

Question

I want to create simple TextArea element in QML and I try this code. but when write in Textarea , text's fall out of border.

Are you have simple TextArea or can you help me to improve this code:

FocusScope {
    id: focusScope
    width: 400; height: 50
property int fontSize: focusScope.height -30
property color textColor: "black"
property string placeHolder: "Type something..."
property string inputExpression: ".*"
property bool isUserInTheMiddleOfEntringText: false

Rectangle {
    width: parent.width
    height: parent.height
    border.color: 'steelblue'
    color: focus?'red':'#AAAAAA'
    border.width: 3
    radius: 0
    MouseArea {
        anchors.fill: parent
        onClicked: { focusScope.focus = true; textInput.openSoftwareInputPanel();
        }
    }
}

Text {
    id: typeSomething
    anchors.fill: parent; anchors.rightMargin: 8
    verticalAlignment: Text.AlignVCenter
    text: placeHolder
    color: "gray"
    font.italic: true
    font.pointSize: fontSize
    MouseArea {
        anchors.fill: parent
        onClicked: { focusScope.focus = true; textInput.openSoftwareInputPanel();
        }
    }

}

MouseArea {
    anchors.fill: parent
    onClicked: { focusScope.focus = true; textInput.openSoftwareInputPanel();
    }
}

TextEdit {
    id: textInput
    anchors { right: parent.right; rightMargin: 8; left: clear.left; leftMargin: 8; verticalCenter: parent.verticalCenter }
    focus: true
    selectByMouse: true
    font.pointSize: fontSize
    wrapMode: TextEdit.WordWrap
    color: textColor

}


Text {
    id: clear
    text: "\u2717" // 'x'//"\u2713"
    color: 'steelblue'
    font.pointSize: 25
    opacity: 0
    anchors { left: parent.left; leftMargin: 8; verticalCenter: parent.verticalCenter }
    MouseArea {
        anchors.fill: parent
        onClicked: { textInput.text = ''; focusScope.focus = true; textInput.openSoftwareInputPanel(); }
    }
}
states: State {
        name: "hasText"; when: textInput.text != ''
        PropertyChanges { target: typeSomething; opacity: 0 }
        PropertyChanges { target: clear; opacity: 1 }
    }
transitions: [
    Transition {
        from: ""; to: "hasText"
        NumberAnimation { exclude: typeSomething; properties: "opacity" }
    },
    Transition {
        from: "hasText"; to: ""
        NumberAnimation { properties: "opacity" }
    }
]
}

thank's for help

Answer 1

This code should do what you want :

import QtQuick 2.0

FocusScope {
    id: focusScope;
    width: 400;
    height: textInput.paintedHeight + (2 * textInput.anchors.topMargin);

    property alias  value                          : textInput.text;
    property alias  fontSize                       : textInput.font.pointSize;
    property alias  textColor                      : textInput.color;
    property alias  placeHolder                    : typeSomething.text;

    Rectangle {
        id: background;
        anchors.fill: parent;
        color: "#AAAAAA";
        radius: 5;
        antialiasing: true;
        border {
            width: 3;
            color: (focusScope.activeFocus ? "red" : "steelblue");
        }
    }
    TextEdit {
        id: textInput;
        focus: true
        selectByMouse: true
        font.pointSize: 20;
        wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere;
        color: "black";
        anchors {
            top: parent.top;
            topMargin: 10;
            left: parent.left;
            leftMargin: 10;
            right: parent.right;
            rightMargin: 10;
        }
    }
    Text {
        id: typeSomething;
        text: "Type something...";
        color: "gray";
        opacity: (value === "" ? 1.0 : 0.0);
        font {
            italic: true
            pointSize: fontSize;
        }
        anchors {
            left: parent.left;
            right: parent.right;
            leftMargin: 10;
            rightMargin: 10;
            verticalCenter: parent.verticalCenter;
        }

        Behavior on opacity { NumberAnimation { duration: 250; } }
    }
    MouseArea {
        visible: (!focusScope.activeFocus);
        anchors.fill: parent
        onClicked: { textInput.forceActiveFocus(); }
    }
    Text {
        id: clear;
        text: "\u2717" // 'x' //"\u2713"
        color: 'steelblue';
        font.pixelSize: 30;
        opacity: (value !== "" ? 1.0 : 0.0);
        anchors {
            right: parent.right;
            bottom: parent.bottom;
            margins: 5;
        }

        Behavior on opacity { NumberAnimation { duration: 250; } }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                value = "";
                focusScope.focus = false;
            }
        }
    }
}

I also fixed many things in you code, like multiple MouseArea for the same use, binding loops, bad anchors/alignements, etc...