[OPEN-1412] Handling specialKey events for TextField (another way)

[dfa]

We implement a special number field, which should be usable very comfortable. Due to these proposals we are dependent on a correct specialKey event handling. In the actual Ext version (3.3) there is a different event handling according to which browser you use.

Our investigations point to following:

• Chrome: Sends only keyDown when pressing a special key
• Firefox: Sends keyDown and keyPress when pressing a special key
• InternetExplorer: Send keyDown when pressing a special key
• Opera: Sends keyDown and keyPress when pressing a special key. Sometimes (e.g. '-' on number block) it sends a keyDown event followed by two (yes two!) keyPress events.

We tried to solve this problem that way:

Ext.override(Ext.form.TextField, {
    keyDownCode:'',

    onKeyDown:function(e){
        var charCode = e.charCode ? e.charCode : e.keyCode;
        this.keyDownCode = charCode;
        this.fireEvent('keydown', this, e);
        if (Ext.isGecko === false && Ext.isOpera === false) {
            if ((charCode === 8) || 
                (charCode === 9) || 
                (charCode === 13) || 
                (charCode === 127) || 
                (charCode >= 33 && charCode <= 40) ||
                (charCode >= 44 && charCode <= 46)) {
                this.fireEvent('specialkey', this, e);
                this.keyDownCode = '';
                return;
            }
        }
    },

    onKeyPress:function(e){
        var charCode = e.charCode ? e.charCode : e.keyCode;
        if (Ext.isGecko === true || Ext.isOpera === true) {
            if (charCode === this.keyDownCode) {
                this.keyDownCode = '';
                if (Ext.isOpera === true && e.browserEvent.which > 0) {
                    // Opera sends keys like '-' in the number block as
                    // 'keydown, keypress, keypress' sequence. The first
                    // sequence 'keydown, keypress' has to be ignored.
                    return;
                }
                this.fireEvent('specialkey', this, e);
                return;
            }
        }
        this.fireEvent('keypress', this, e);
    }

});

If you - the ExtJs development team - think this is a way, feel free to integrate it.

Best regards,
Dom

[dfa]

Oops, I forgot three lines of code:

Ext.override(Ext.form.Field, {
    fireKey:function(e){
    }
});

We have to deactivate the fireKey event.

[dfa]

Sorry for these multiple updates. The actual version:

Ext.override(Ext.form.Field, {
    fireKey:function(e){
    }
});

Ext.override(Ext.form.TextField, {
    keyDownCode:'',

    isSpecialKey:function(keyCode){
        if (this.isSpecialKeyNonPrintable(keyCode) === true) {
            return true;
        }
        return this.isSpecialKeyPrintable(keyCode);
    },

    isSpecialKeyNonPrintable:function(keyCode){
        return ((keyCode === 8) || 
                (keyCode === 9) || 
                (keyCode === 13) || 
                (keyCode === 127));

    },

    isSpecialKeyPrintable:function(keyCode){
        return ((keyCode >= 33 && keyCode <= 40) ||
                (keyCode >= 44 && keyCode <= 46));
    },

    onKeyDown:function(e){
        var charCode = e.charCode ? e.charCode : e.keyCode;
        this.keyDownCode = charCode;
        this.fireEvent('keydown', this, e);
        if (Ext.isGecko === false && Ext.isOpera === false) {
            if (this.isSpecialKey(charCode) === true) {
                this.fireEvent('specialkey', this, e);
                this.keyDownCode = '';
                return;
            }
        }
    },

    onKeyPress:function(e){
        var charCode = e.charCode ? e.charCode : e.keyCode;
        if (Ext.isGecko === true || Ext.isOpera === true) {
            if ((charCode === this.keyDownCode) &&
                (this.isSpecialKey(charCode) === true)) {
                this.keyDownCode = '';
                if (Ext.isOpera === true && e.browserEvent.which > 0 && this.isSpecialKeyPrintable(charCode) === true) {
                    // Opera sends keys like '-' in the number block as
                    // 'keydown, keypress, keypress' sequence. The first
                    // sequence 'keydown, keypress' has to be ignored.
                    return;
                }
                this.fireEvent('specialkey', this, e);
                return;
            }
        }
        this.fireEvent('keypress', this, e);
    }

});