extjs完美实现“密码框显示提示文字,不显示输入文字”的变态需求!!!

先看下需求:“密码框显示提示文字,不显示输入文字”

1、正常状态下:

2、密码框输入密码时:

3、密码框有值的时候,失去鼠标焦点的状态:

4、密码框值为空的时候,失去鼠标焦点的状态:

 

实现代码:

 

    username:{
        cls: "text_field username",
        inputType: 'text',
        width: 326,
        height: 60,
        emptyText: '账户',
        emptyClass:"usernameEmpty",
        focusClass:"usernameSelect",
        margins:"30 58 0 58",

        listeners: {

        }
    },
    password:{
        cls: "text_field password",
        inputType: 'text',
        width: 326,
        height: 60,
        emptyText: '密码',
        emptyClass:"usernameEmpty",
        focusClass:"passwordSelect",
        margins:"30 58 0 58",
        enableKeyEvents: true,
        listeners: {
            keypress: function (field, e) {
                if (e.getKey() == 13) {
                    Ext.getCmp("loginBtn").el.dom.click();
                }
            },
            focus: function(){
                document.getElementById('password').type = "password";
            },
            change: function(){
                if (this.getValue() !== ""){
                    document.getElementById('password').type = "password";
                } else {
                    document.getElementById('password').type = "text"; 
                }
            }
        }
    },


关键代码:

 

listeners:{

           focus: function(){
                document.getElementById('password').type = "password";
            },
            change: function(){
                if (this.getValue() !== ""){
                    document.getElementById('password').type = "password";
                } else {
                    document.getElementById('password').type = "text"; 
                }
            }

}

 

解释一下:

1、 通过监听输入框的 focus 和 change 这两个事件,分别对输入框获得焦点和输入值这两种情况来改变输入框的类型。

2、那么怎么修改输入框的类型呢?尝试了一下 this.inputType = "password"  然并卵,最终只有这样才行:

 document.getElementById('password').type = "你想要的类型"; 

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页