1. #1
    Ext User
    Join Date
    Aug 2007
    Posts
    2
    Vote Rating
    0
    robertfulcrum is on a distinguished road

      0  

    Default [FIXED] VType mask does not restrict period in IE 6, but does in Firefox

    [FIXED] VType mask does not restrict period in IE 6, but does in Firefox


    I have a TextField control with vtype set to 'alphanum'. According to VTypes.js, the regular expression for the mask is /[a-z0-9_]/i, which I think means I can input any alphabet, 0-9, or underscore. I should not be able to type in a period (.).

    Tested this in Firefox 2 - can't type period
    Tested this in IE 6 - can type period

    This seems to happen only with the mask. Validation via alphanum.test(v) works as expected in both browser - i.e., in IE, if the field has a period, it will error.

    This also is a problem with the 'alpha' mask as well as any mask I'd create for custom vtypes.

    Thanks in advance
    Robert

  2. #2
    Ext User
    Join Date
    Aug 2007
    Posts
    2
    Vote Rating
    0
    robertfulcrum is on a distinguished road

      0  

    Default Actually two bugs here ...

    Actually two bugs here ...


    The first bug is that the period is getting past the filter method filterKeys in Ext.form.TextField. As far as I can tell, the keycode for the period is 46 and the keycode for DELETE is 46. So it thinks the period is actually the DELETE key and let's it through.

    The second bug is that all shift characters (i.e, #, $, & ...) are passed through as well in IE. I think it has to do with the SHIFT key. The method isNavKeyPress in IE is seeing the SHIFT key and letting the follow-on character past. Not so with Firefox which correctly see the SHIFT key and restrict the follow-on character.

    I'm not a javascript expert but I was able to glean the above via some ugly alert statements.

    Thanks.

  3. #3
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    which Ext build are you on?

  4. #4
    Ext User
    Join Date
    May 2007
    Posts
    15
    Vote Rating
    0
    Zac is on a distinguished road

      0  

    Default


    I just ran into the same problem with IE and found this thread from searching.

    I'm using the latest 1.1 release and it happens with IE6, but not Firefox.

    Edit: Seem it doesn't catch any of the following:
    . ' " ( & % $ # !

  5. #5
    Ext User
    Join Date
    Oct 2007
    Posts
    7
    Vote Rating
    0
    hamlet75 is on a distinguished road

      0  

    Question Same in Ext 2.0

    Same in Ext 2.0


    Hi here,

    i face exact the same problem with the final Version 2.0 of Ext Js.
    Unfortunately I haven't found anything about it and this seems to be a very common problem.

    What do I miss ?

    Regards

  6. #6
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    I've added this to our list to look at for the next release.

  7. #7
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    Try this and let me know if you still have any issues:

    Code:
    Ext.override(Ext.form.TextField, {
        filterKeys : function(e){
            var k = e.getKey();
            if(Ext.isGecko && (e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1))){
                return;
            }
            var c = e.getCharCode(), cc = String.fromCharCode(c);
            if(!Ext.isGecko && e.isSpecialKey() && !cc){
                return;
            }
            if(!this.maskRe.test(cc)){
                e.stopEvent();
            }
        }
    });
    
    Ext.onReady(function() {
    
        new Ext.form.TextField({
            renderTo: Ext.getBody(),
            vtype: 'alphanum',
            maskRe: Ext.form.VTypes.alphanumMask
        });
        
    });

  8. #8
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    Updated patch to fix the same issue for Safari. EDIT: After further testing I found that Opera has the same issue! So I changed the check to a Gecko check rather than a non-IE check to handle all browsers. Let me know if anyone finds any issues with this patch.

  9. #9
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    Fixed in SVN.

  10. #10
    Ext User
    Join Date
    Jul 2008
    Posts
    7
    Vote Rating
    0
    xwerx is on a distinguished road

      0  

    Default vtype="email", Opera, backspace

    vtype="email", Opera, backspace


    I had a similar problem with opera and vtype="email" where backspace, arrow keys, tabulation, etc. didn't work.
    I'm using extjs 2.2.

    The code above seems to fix this with small amendment, I've removed browser check (isGecko) from the first if, because then it stopped working with other browsers.

    Anyways, this fixes my problem:

    Code:
    Ext.override(Ext.form.TextField, { // vtype=email validation problem for opera
        filterKeys : function(e){
            var k = e.getKey();
            if(e.isNavKeyPress() || k == e.BACKSPACE || (k == e.DELETE && e.button == -1)) return;
            var c = e.getCharCode(), cc = String.fromCharCode(c);
            if(!Ext.isGecko && e.isSpecialKey() && !cc) return;
            if(!this.maskRe.test(cc)) e.stopEvent();
        }
    });