Elide text in TextField

AYYAPPA

hello,

i want to know how to elide text in TextField when textField focus change to false.(not entering values in textfield).

thanks,
ayyappa.

raven-worx

@AYYAPPA
something like this:

TextField {
    id: textField
    property string fullText: .... // set your actual text content here
    text: activeFocus ? fullText : metrics.elidedText
 
    TextMetrics {
        id: metrics
        font: textField.font
        text: textField.fullText
        elideWidth: textField.width - 5
    }
}

(untested)

AYYAPPA

@raven-worx sounds good. i will try and let you know . thanks !!

AYYAPPA

i still feel it would have been better if TextFiled has the ability to store full text and show elided text like Text item.
is there any other qml item which does same job as TextField and has elides text when gone beyond width ??
if you see login page of Instagram , user name filed uses TextField kind of item but does the eliding operation by itself !!

raven-worx

@AYYAPPA
i am not aware of any (input-)control in Qt which has eliding support

AYYAPPA

ok thank you

Kamichanw

@raven-worx This seems cannot work properly. Because when I input text that beyond the elideWidth of metrics to TextField, fullText will not be updated. Therefore, you should connect text with fullText at least, just like this

Connections {
        function onTextChanged() {
            if (text !== metrics.elidedText)
                fullText = text
        }
}

Solved Elide text in TextField