Secure text entry for TextFiled - qt

Question

I am using textfiled for password entry with echomode password. but i want it should display characters while entering and after some time(one sec) or entering next char it should goto asterisks.
code:
TextField {
id: inputtext
height: parent.height
width:parent.width
font.family: "Helvetica"
horizontalAlignment: TextInput.Center
font.pointSize: Math.round(28 * (main.height/1080))
placeholderText:"Password"
echoMode:TextInput.Password
}
I tried it using text item which displays current enter key after some time i will make it invisible and moving text item based on cursor position.
code:
TextField {
id: inputtext
anchors.centerIn: parent
width: 200
height: 20
echoMode:TextInput.Password
Text{
id: showpwd
text: "h"
font.pointSize: 10
verticalAlignment: Text.AlignVCenter
}
onTextChanged: {
showpwd.x = cursorPosition*7
showpwd.text = text.charAt(cursorPosition-1);
}
}
issue: still i can view asterisk behind the text item. could some one help me out of this.

Answer 1

I think you should use TextInput instead of TextField because it's a basic element in qml. Let's take the following example for password entry, I'm using passwordMaskDelay property of TextInput which was introduced in Qt 5.4.
Rectangle {
id: container
width: 200
height: 200
color: "yellow"
TextInput {
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
id: text2
echoMode: TextInput.Normal
font.pixelSize: 20; font.bold: true
text: "Enter text here..."
width: container.width - 40 ;
focus: true
passwordMaskDelay: 1000
}
MouseArea {
anchors.fill: parent
onClicked: {
text2.text = "";
text2.echoMode = TextInput.Password;
}
}
}
I think you wanted a transparent background, I've kept that in mind. You can experiment with it.

Answer 2

Very interesting question. But I think it's impossible to override visible text of TextField in this way. As for solution I can offer only this lame workaround:
TextField {
id: inputtext
anchors.centerIn: parent
echoMode:TextInput.Password
horizontalAlignment: TextInput.Center
onEditingFinished: mask.visible = false
Rectangle {
id: mask
anchors.fill: parent
color: "white"
border.width: 1
border.color: "#999"
Text {
anchors.centerIn: parent
font: inputtext.font
text: new Array(inputtext.text.length).join( "*" ) + inputtext.text.charAt(inputtext.text.length - 1)
}
}
}

Answer 3

I just have done very little testing. But, it should give you the idea.
TextField {
id: pwdField
property string password: ""
// could be ugly solution, but does the job
property string replaceString: "*******************************************************************"
property bool ignoreNext: false
placeholderText: "some text"
onTextChanged: {
if (ignoreNext) return;
var txtLength = text.length;
if (txtLength === 0) {
password = text;
updateTimer.stop();
} else {
if (txtLength < password.length) {
password = password.substring(0, txtLength);
console.log(text, "pwd: ", password)
return;
} else if (txtLength > password.length) {
password += text.charAt(txtLength - 1)
}
if (updateTimer.running) {
obscureText();
ignoreNext = true
text = text.substring(0, txtLength - 1) + password.charAt(password.length - 1);
ignoreNext = false
}
updateTimer.restart();
}
console.log(text, "pwd: ", password)
}
onEditingFinished: {
updateTimer.stop();
obscureText();
}
function obscureText() {
ignoreNext = true;
text = replaceString.substring(0, text.length);
ignoreNext = false;
}
Timer {
id: updateTimer
running: false
repeat: false
interval: 1000
onTriggered: pwdField.obscureText();
}
}
issues you have to workaround:
you can't really use text property anymore as it will give you all *****, use password and onPasswordChanged signal
this solution won't work if user moves the cursor around using navigation keys