Many times when you create a login form which has password field, you need to make sure the user enter valid password. The changes of entering wrong password by the user may also lead to blocking of account. To minimize the error we can tell user to enter correct password and display error/warning message if Caps Lock key is on.
ExtJS textfield component comes with a keypress listener which we can use to check which key user has entered. To capture any pressed key for textfield we need to listen keypress event as follows.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
Ext.onReady(function () {
Ext.create(‘Ext.form.Panel’, {
width: 400,
frame: true,
title: ‘Login Form – TechZoo’,
padding: 10,
fieldDefaults: {
msgTarget: ‘side’,
labelWidth: 75
},
defaultType: ‘textfield’,
defaults: {
anchor: ‘98%’
},
items: [{
xtype: ‘displayfield’,
value: ‘
Please enter your username, password to submit the form. ‘ },{
fieldLabel : ‘User Name’,
name : ‘username’,
allowBlank : false,
msgTarget : ‘side’
},{
fieldLabel: ‘Password’,
name : ‘password’,
allowBlank: false,
inputType : ‘password’,
validateOnBlur : true,
validateOnChange: false,
enableKeyEvents : true,
listeners : {
keypress: function(me, e) {
var charCode = e.getCharCode();
if(!e.shiftKey && charCode >= 65 && charCode <= 90){
//Ext.MessageBox.alert(“”, “Caps Lock is On”);
me.markInvalid(‘Caps Lock is On’);
}
else {
me.isValid();
}
}
}
}],
dockedItems: [{
xtype: ‘toolbar’,
dock: ‘bottom’,
ui: ‘footer’,
items: [{
xtype: ‘tbfill’
},{
text: ‘Cancel’
},{
text: ‘Submit Form’
}]
}],
renderTo: ‘output’
});
});
|
Output:
Source techzoo.org
