Paddy Pyker
Paddy Pyker

Reputation: 43

Detect changes on every character typed in a TextField QML

I want to detect whenever the value in a TextField is altered. All I see is the editingFinished() and textEdited() signals which emits only when the space character,backspace or enter key is pressed.

Tried Keys.onPressed{} in the TextField component but didn't work as expected

Anyone with a better idea to do this?

Upvotes: 1

Views: 2147

Answers (2)

tomas
tomas

Reputation: 106

It might be an issue with text not being committed yet to the field. This happens especially on Android devices.

In that case I suggest to test these two solutions:

  1. listen on displayText property changes with onDisplayTextChanged slot, or
  2. listen on preeditText property changes with onPreeditTextChanged

If this is the case and you would like the text be committed after each character, you could do something like:

TextField {
  ...
  onPreeditTextChanged: if ( this is android ) Qt.inputMethod.commit() // to avoid Android's uncommited text
}

Make sure you do this only on Android (other platforms might double the characters on some keyboards)! It is a little hack. I would first try the displayText property.

Upvotes: 4

Paddy Pyker
Paddy Pyker

Reputation: 43

So after a few hours of trying, I think I found a way which works at least for me using the contentSizeChanged() signal

TextField {
            id: nameValue
            anchors{
                top: parent.top
                left: parent.left
                right: parent.right
                margins: Style.margin*2
            }

            placeholderText: Style.selectedName
            Material.accent: Style.colorAccent
            font.pixelSize: Style.smallTinyFontSize
            verticalAlignment: Qt.AlignVCenter


            onContentSizeChanged: console.log("contentSizeChanged")
            onTextChanged: console.log("TextChanged ")
            onTextEdited: console.log("TextEdited")
            onEditingFinished: console.log("EditingFinished")

            

        }

Hello World typed into the textField with Enter key pressed produces this output at the console

enter image description here

Upvotes: 0

Related Questions