PDA

View Full Version : keypress event triggering for special keys in IE7



Jonno70
4 Jul 2007, 5:59 AM
This has completely confused me..
I created a form with a TextField using the vType 'email'..

new Ext.form.TextField({
fieldLabel: 'eMail Address',
name: 'email',
vtype:'email',
width: 190
})

OK displays correctly, and in Firefox2 all works perfectly.

However in IE 7, the keypress validation is not working. If I try entering a period '.' or dash '-' or underscore '_', it is being blocked.

After some investigation, I found that the 'keypress' event was being fired when pressing shift. This is not supposed to happen. The keypress event is not supposed to trigger for special keys (as far as I understand).

This means that (using a belgium keyboard, where I have to press shift to enter a period) I cannot enter a valid email address in IE7.

Adding a similar event to an element without using Ext works fine. e.g.

<input id="testField" type="text" onkeypress="filterKeys();">
where..

function filterKeys(){
var emailRegEx = /[a-z0-9_\.\-@]/i;
e = event;
var c = e.keyCode;
if(!emailRegEx.test(String.fromCharCode(c) || '')){
e.stopEvent();
}
}
event occurs as expected, not triggered by pressing shift.

If I try to add the event using Ext ..

Ext.get('testField').on('keypress', filterKeys);
event is triggered when pressing shift.

Is the Ext EventManager triggering the keydown event instead of the keypress event?

intothefire
13 Aug 2007, 1:04 AM
Has anyone managed to find a solution to this issue?

mystix
13 Aug 2007, 1:19 AM
have you tried this with Ext 1.1?

intothefire
13 Aug 2007, 1:26 AM
I've actually forund a solution for this:

set disableKeyFilter: true in your options on teh text box and it allows all the special characters

jack.slocum
13 Aug 2007, 5:28 AM
Please try this version of filterKeys and let me know if it fixes your issue. Thanks.


filterKeys : function(e){
var k = e.getKey();
if(!Ext.isIE && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){
return;
}
var c = e.getCharCode(), cc = String.fromCharCode(c);
if(Ext.isIE && (e.isSpecialKey() || !cc)){
return;
}
if(!this.maskRe.test(cc)){
e.stopEvent();
}
}

intothefire
20 Aug 2007, 11:16 AM
Hi Jack.

The following worked for me:


filterKeys : function(e){
var k = e.getKey();
console.log((k == e.BACKSPACE));
if(!Ext.isIE && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){
return;
}
if(Ext.isIE && (k == e.BACKSPACE || k == e.DELETE || e.isNavKeyPress() || k == e.HOME || k == e.END)){
return;
}
var c = e.getCharCode();
if(!this.maskRe.test(String.fromCharCode(c) || '')){
e.stopEvent();
}
},

also, I found a similar issue with the NumberField where numeric keypad input was not accepted in IE (or backspace etc.) the following worked for that issue:


initEvents : function(){
Ext.form.NumberField.superclass.initEvents.call(this);
var allowed = "0123456789";
if(this.allowDecimals){
allowed += this.decimalSeparator;
}
if(this.allowNegative){
allowed += "-";
}
this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
var keyPress = function(e){
var k = e.getKey();
if(!Ext.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
return;
}
if(Ext.isIE && (k == e.BACKSPACE || k == e.DELETE || e.isNavKeyPress() || k == e.HOME || k == e.END)){
return;
}
var c=e.getCharCode();
var inputText;

switch(c)
{
case 96: inputText = "0"; break;
case 97: inputText = "1"; break;
case 98: inputText = "2"; break;
case 99: inputText = "3"; break;
case 100: inputText = "4"; break;
case 101: inputText = "5"; break;
case 102: inputText = "6"; break;
case 103: inputText = "7"; break;
case 104: inputText = "8"; break;
case 105: inputText = "9"; break;
default: inputText = String.fromCharCode(c); break;
}



if(allowed.indexOf(inputText) == -1){
e.stopEvent();
}
};
this.el.on("keypress", keyPress, this);



Please try this version of filterKeys and let me know if it fixes your issue. Thanks.


filterKeys : function(e){
var k = e.getKey();
if(!Ext.isIE && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){
return;
}
var c = e.getCharCode(), cc = String.fromCharCode(c);
if(Ext.isIE && (e.isSpecialKey() || !cc)){
return;
}
if(!this.maskRe.test(cc)){
e.stopEvent();
}
}

intothefire
20 Aug 2007, 11:26 AM
Slight revision to the NumberField code above:



initEvents : function(){
Ext.form.NumberField.superclass.initEvents.call(this);
var allowed = "0123456789";
if(this.allowDecimals){
allowed += this.decimalSeparator;
}
if(this.allowNegative){
allowed += "-";
}
this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
var keyPress = function(e){
var k = e.getKey();
if(!Ext.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
return;
}
if(Ext.isIE && (k == e.BACKSPACE || k == e.DELETE || e.isNavKeyPress() || k == e.HOME || k == e.END)){
return;
}
var c=e.getCharCode();
var inputText = String.fromCharCode(c);

if (Ext.isIE) {
switch(c)
{
case 96: inputText = "0"; break;
case 97: inputText = "1"; break;
case 98: inputText = "2"; break;
case 99: inputText = "3"; break;
case 100: inputText = "4"; break;
case 101: inputText = "5"; break;
case 102: inputText = "6"; break;
case 103: inputText = "7"; break;
case 104: inputText = "8"; break;
case 105: inputText = "9"; break;
}
}

if(allowed.indexOf(inputText) == -1){
e.stopEvent();
}
};
this.el.on("keypress", keyPress, this);


ensures that firefox behaves correctly.

intothefire
20 Aug 2007, 11:41 AM
I take it back - the filter keys still don't work with the email vtype.

I put a log on the filterKeys function and when trying to press @ the key code returned is 192
so the regex is still not matching.

disabling filterkeys does mean this doesn't happen though.

smolloy
21 Aug 2007, 5:14 PM
I think you need to add the following to your case statements to accurately handle the "." character:

case 190: case 110: inputText = "."; break;

smolloy
21 Aug 2007, 5:16 PM
Will a new ext-all.js (minified) be forthcoming with this fix when it's finalized?