PDA

View Full Version : [RESOLVED]KeyPress -- Need to return false when CAPSLOCK active



Rafael
10 May 2009, 3:49 PM
keypress: function(e) {
var charCode = e.getCharCode();
if(
(e.shiftKey && charCode >= 97 && charCode <= 122) ||
(!e.shiftKey && charCode >= 65 && charCode <= 90)
){
if (this.showCapsWarning) {
this.showWarning(e.target);
}
return false;
} else {
this.hideWarning();
}
},
this return false dont stop a write

Condor
10 May 2009, 9:44 PM
Try:

e.stopEvent();

Rafael
11 May 2009, 4:58 AM
Condor,

e.stopEvent();

dont stop !

Condor
11 May 2009, 5:23 AM
On which browser?

ps. For IE you sometimes have to add:

if(Ext.isIE) {e.browserEvent.keyCode = 0;}

Rafael
11 May 2009, 5:48 AM
Condor this

e.stopEvent();
and this


if(Ext.isIE) {e.browserEvent.keyCode = 0;}work !

Need to verify if user press SHIFT, how ?

Condor
11 May 2009, 5:54 AM
It works on my Firefox...


var t = new Ext.form.TextField({
enableKeyEvents: true,
listeners: {
keypress: function(f, e){
var charCode = e.charCode;
if((e.shiftKey && charCode >= 97 && charCode <= 122) ||
(!e.shiftKey && charCode >= 65 && charCode <= 90)){
e.stopEvent();
}
}
}
});

Rafael
11 May 2009, 6:15 AM
is here dont work with SHIFT and work with CAPSLOCK

new Ext.form.TextField({
enableKeyEvents: true,
listeners: {
keypress: function(f, e){
var charCode = e.charCode;
if((e.shiftKey && charCode >= 97 && charCode <= 122) ||
(!e.shiftKey && charCode >= 65 && charCode <= 90)){
e.stopEvent();
}
}
}
});

Condor
11 May 2009, 6:22 AM
I don't understand... Which keys do you want to block?
- Normal keys
- Shifted keys
- Normal keys with Caps-Lock
- Shifted keys with Caps-Lock

Rafael
11 May 2009, 6:43 AM
- Shifted keys
- Normal keys with Caps-Lock

Condor
11 May 2009, 6:53 AM
So you don't want to block Caps-Lock at all! You want to block uppercase!

Try:

var t = new Ext.form.TextField({
enableKeyEvents: true,
listeners: {
keypress: function(f, e){
var charCode = e.charCode;
if(charCode >= 65 && charCode <= 90){
e.stopEvent();
}
}
}
});
which can be simplified to:

var t = new Ext.form.TextField({
maskRe: /[^A-Z]/
});
Or, to also handle pasted uppercase text:

var t = new Ext.form.TextField({
maskRe: /[^A-Z]/,
processValue: function(value){
value = this.constructor.prototype.processValue.call(this, value);
var newValue = value.toLowerCase();
if(newValue !== value){
this.setRawValue(newValue);
return newValue;
}
return value;
}
});

Rafael
11 May 2009, 7:11 AM
Condor, thank you.

I have a probleman if a event blur.
I have a focus in Texfield but if i click in another Textfield the event blur dont work. Work when i press tab.

Condor
11 May 2009, 7:13 AM
I don't have this problem.

Could you post your code?

Rafael
11 May 2009, 7:18 AM
items: new Ext.ux.PasswordField({
showCapsWarning: true,
maskRe: /[^A-Z]/,
dataIndex: 'senha_funcionario',
fieldLabel: 'Senha',
name: 'senha_funcionario',
id : 'senha_funcionario',
type: 'string',
anchor:'95%'
}),
},{
columnWidth:.3,
layout: 'form',
items: new Ext.ux.PasswordField({
showCapsWarning: true,
maskRe: /[^A-Z]/,
fieldLabel: 'Repetir Senha',
name: 'repetir_senha_funcionario',
id : 'repetir_senha_funcionario',
type: 'string',
anchor:'95%'
}),
},{



Ext.extend(Ext.ux.PasswordField, Ext.form.TextField, {
/**
* @cfg {String} inputType The type attribute for input fields -- e.g. text, password (defaults to "password").
*/
inputType: 'password',
// private
onRender: function(ct, position) {
Ext.ux.PasswordField.superclass.onRender.call(this, ct, position);

// create caps lock warning box
var id = Ext.id();
this.alertBox = Ext.DomHelper.append(document.body,{
tag: 'div',
style: 'width: 10em; z-index: 10000',
children: [{
tag: 'div',
style: 'text-align: center; color: red;',
html: 'CAPSLOCK ATIVADO',
id: id
}]
}, true);
Ext.fly(id).boxWrap();
this.alertBox.hide();

this.on('beforedestroy', function(){
this.alertBox.hide()
});

},
initEvents: function() {
Ext.ux.PasswordField.superclass.initEvents.call(this);
this.el.on('keypress', this.keypress, this);
},
keypress: function(e) {
var charCode = e.getCharCode();
if(charCode >= 65 && charCode <= 90){
if (this.showCapsWarning) {
this.showWarning(e.target);
}
e.stopEvent();
if(Ext.isIE) {e.browserEvent.keyCode = 0;}
} else {
this.hideWarning();
}
},
blur: function(){
this.hideWarning();
},
showWarning: function(el) {
this.alertBox.alignTo(el, 'l-r', [5, 0]);
this.alertBox.show();
},
hideWarning: function() {
this.alertBox.hide();
}
}
);

Condor
11 May 2009, 7:22 AM
That's not a blur event, it's a blur method! And you are replacing the existing blur method.

Instead, name you method myBlur and register it in initEvents:

this.on('blur', this.myBlur, this);

Rafael
11 May 2009, 7:44 AM
Thank you CONdor

great.