Question

我使用textfiled进行密码输入和echomode密码。但我希望它应该在进入和一段时间（一秒）后显示字符或进入下一个字符它应该转到星号。

代码：

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
    }

我尝试使用显示当前输入键的文本项，一段时间后我会根据光标位置使其不可见并移动文本项。代码：

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);

    }
}

问题：我仍然可以在文本项后面查看星号。有人可以帮助我解决这个问题。

Answer 1

我认为您应该使用TextInput代替TextField，因为它是qml中的基本元素。让我们使用以下示例进行密码输入，我使用passwordMaskDelay中引入的TextInput Qt属性。

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;
        }
    }
}

我认为你想要一个透明的背景，我记住了这一点。你可以尝试一下。

Answer 2

非常有趣的问题。但我认为以这种方式覆盖TextField的可见文本是不可能的。至于解决方案，我只能提供这种蹩脚的解决方法：

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

我刚做了很少的测试。但是，它应该给你这个想法。

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();
    }
}

您需要解决的问题：

您不能再使用text属性，因为它会为您提供所有*****，使用password和onPasswordChanged信号
如果用户使用导航键移动光标

TextFiled的安全文本输入

3 个答案: