PDA

View Full Version : Show emptyText on password field



earist
9 May 2012, 2:39 AM
Hi,

I have a problem when I want to show the emptyText on the password field.

I created a Sign In form with following fields



{
xtype : 'textfield',
id : 'usernameTextfield',
emptyText : 'User ID',
blankText : 'Enter your ID',
name : 'uid',
width : 200,
hideLabel : true,
allowBlank : false,
listeners : {
specialkey : function(field, el) {
if (el.getKey() == Ext.EventObject.ENTER)
Ext.getCmp('submitButton').fireEvent('click');
}
}
},
{
xtype : 'textfield',
id : 'passwordTextfield',
emptyText : 'Password',
inputType : 'password',
blankText : 'Enter your password',
name : 'password',
width : 200,
allowBlank : false,
hideLabel : true,
listeners : {
specialkey : function(field, el) {
if (el.getKey() == Ext.EventObject.ENTER)
Ext.getCmp('submitButton').fireEvent('click');
}
}
}


These fields can be shown on Firefox, Chome correctly but on IE the password field display ***** instead of text specified in emptyText

Result on IE:

35021

Result on Firefox

35022

If I change the password filed like this:


{
xtype : 'textfield',
id : 'passwordTextfield',
emptyText : 'Password',
vtype: 'password', // <--- change inputType to vtype
blankText : 'Enter your password',
name : 'password',
width : 200,
allowBlank : false,
hideLabel : true,
listeners : {
specialkey : function(field, el) {
if (el.getKey() == Ext.EventObject.ENTER)
Ext.getCmp('submitButton').fireEvent('click');
}
}
}


The result on IE can be shown correctly like this:

35023

But the Sign in button is never actived eventhought I full fill this form. This problem occur on Firefox, Chrome and IE.

How should I do for showing the emptyText on the password field.


Thanks in advance.
earist

earist
9 May 2012, 5:48 PM
Can anyone help me?

sword-it
9 May 2012, 10:55 PM
Hi Earist,

Try this:-


{
xtype: 'textfield',
id: 'passwordTextfield',
emptyText: 'Password',
name: 'password',
width: 200,
allowBlank: false,
hideLabel: true,
listeners: {
focus: {
fn: function (passwordField) {
passwordField.getEl().dom.setAttribute('type', 'password');
passwordField.getEl().addClass('x-form-password');
}
},
blur: {
fn: function (passwordField) {
var value = passwordField.getValue();
if (value == 'Password' || value=='') {
passwordField.getEl().dom.setAttribute('type', 'text');
passwordField.getEl().addClass('x-form-text');
passwordField.getEl().removeClass('x-form-password');
}
}
}
}
}


Hope it will works for you..

Suggestions/feedback are welcome...

have a nice day!!!!!!

earist
10 May 2012, 1:44 AM
Thank you, sword-it

I try to use your code but it don't work.
The "passwordField" in focus and blur listener refer to <div id="passwordTextfield"> not <input>

so I change the code like this



{
xtype : 'textfield',
id : 'passwordTextfield',
inputId : "password",
emptyText : 'Password',
blankText : 'Enter your password',
name : 'password',
width : 200,
allowBlank : false,
hideLabel : true,
listeners : {
specialkey : function(field, el) {
if (el.getKey() == Ext.EventObject.ENTER)
Ext.getCmp('submitButton').fireEvent('click');
},
focus: function (passwordField) {
var passwordInput = passwordField.inputEl; // get inputEl that refer to <input>
passwordInput.dom.setAttribute('type', 'password');
passwordInput.addCls('x-form-password');
},
blur: function (passwordField) {
var value = passwordField.getValue();
if (value == 'Password' || value=='') {
var passwordInput = passwordField.inputEl; // get inputEl that refer to <input>
passwordInput.dom.setAttribute('type', 'text');
passwordInput.addCls('x-form-text');
passwordInput.removeCls('x-form-password');
}
}
}
}


This code work with Firefox and Chrome but do not work with IE (I am using IE8).

IE say "This command is not supported" or "Object doesn't support this property or method"
when I try to use
"passwordInput.dom.setAttribute('type', 'password');"
or
"passwordInput.dom.type = 'password';"

Eventhought I get passwordInput by using "var passwordInput = Ext.get('password')" and then use above statement, IE still say it do not support.

Do you have any idea?

Thanks you for your helps.
earist.

earist
23 May 2012, 6:41 PM
This bug still occur.

How should i do?
Please help me

earist

earist
28 May 2012, 8:33 PM
Now I using following code:



{
xtype : 'textfield',
id : 'passwordField',
inputType : 'password',
name : 'password',
width : 200,
allowBlank : true,
hideLabel : true,
hidden : true,
listeners : {
specialkey : function(field, el) {
if (el.getKey() == Ext.EventObject.ENTER)
Ext.getCmp('submitButton').fireEvent('click');
},
blur: function (passwordField) {
var value = passwordField.getValue();
if (value == '')
{
var passwordText = Ext.getCmp('passwordTextField');
var passwordPass = Ext.getCmp('passwordField');
passwordText.show();
passwordPass.hide();
}
}
}
}, {
xtype : 'textfield',
id : 'passwordTextField',
emptyText : 'Password',
name : 'passwordText',
width : 200,
allowBlank : true,
hideLabel : true,
listeners : {
specialkey : function(field, el) {
if (el.getKey() == Ext.EventObject.ENTER)
Ext.getCmp('submitButton').fireEvent('click');
},
focus: function (passwordField) {
var passwordText = Ext.getCmp('passwordTextField');
var passwordPass = Ext.getCmp('passwordField');
passwordText.hide();
passwordPass.show();
passwordPass.focus();
}
}
}


When the page is loaded, makes the password field hidden and the plain text field visible.
- On focus, when user clicks the plain text field, makes the plain text field hidden, the password field visible and puts focus on the password field.
- On blur, if the password field contains an empty value the plain text field is restored as the visible one to show the emptyText value.

It work with FireFox, Chrome and IE

Anyone have any idea?
This code is ok?

Thank you