PDA

View Full Version : Change inputType onblur



catapult
30 Oct 2009, 2:51 AM
Is it possible to change a textfields input type?

I would like to show a login box with two textfields. The first textfield accepts either an email or a username. I have an blur listener on this field that validates if it is a valid email. If it is the user can just enter a plaintext reference in the second textfield to login. If it isn't a valid email I want to be able to change the second textfields inputType to password so the user can enter their password an have it hidden.

I can change the textfield objects inputType property from "text" to "password" and see the change in firebug. I have tried calling doLayout() after the change but this doesn't seem to work.

Any help gratefully received.

sanjoyroy
10 Feb 2010, 9:05 PM
{
fieldLabel: 'Password',
name: 'account_password',
id: 'account_password',
width: 100,
inputType:'text',
value: '".$acc_password."'
},{
xtype: 'button',
name: 'password_button',
id: 'password_button',
enableToggle : true,
iconCls: 'lock',
width: 50,
text: 'Show Password',
toggleHandler: function(btn, st){
if(!st){
Ext.getCmp('password_button').setText('Show Password');
Ext.getCmp('password_button').setIconClass('lock');
Ext.getCmp('account_password').getEl().dom.setAttribute('type','password');
Ext.getCmp('account_password').getEl().addClass('x-form-password');
}else{
Ext.getCmp('password_button').setText('Hide Password');
Ext.getCmp('password_button').setIconClass('unlock');
Ext.getCmp('account_password').getEl().dom.setAttribute('type','text');
Ext.getCmp('account_password').getEl().addClass('x-form-text');
}
}
}

catapult
11 Feb 2010, 1:27 AM
Thanks for that mate I will give it a try.

TheCoderZ
15 Mar 2011, 12:06 PM
You can buy a PHP script from www.iharmi.elementfx.com (http://www.iharmi.elementfx.com/) that generates JavaScript code to handle input fields, both text and password, and textareas.

It works for the most common browsers such as Chrome, IE, Firefox, Opera and Safari.

There's a video example that shows you how to use it