TextField and MaskRe

[medley]

Thanx for your help.

Medley

[medley]

In my previous project, we were using this function to set a input mask

var 
JOK_ALPHANUM = '?',
JOK_ALL = '*',
JOK_NUM = '0',
JOK_ALPHA = 'A',
JOK_00 = JOK_ALPHA+JOK_NUM+JOK_ALPHANUM+JOK_ALL;


function setMaskInput (id, motif) 
{
    var o = document.getElementById(id);
    if (!o) return;
    o.motif = motif;
    o.shiftDown = false;
    o.onkeydown = kdn;
    o.onkeyup = kup;
}
function kup () 
{
    if (!event) return;
    if (event.keyCode == 16) this.shiftDown = false;
}

function kdn () 
{
    if (!event) return;
    var c = event.keyCode;
    //if ( == 16) this.shiftDown = true;
    if (c == 9) return true;
    if (c < 48 && c!=8 && c!=32 && c!=46 && c != 16 && c!=37 && c!=39 && c!=36 && c!=35 ) return false;

    var str = this.value;
    
    if (c == 37 || c == 35 || c == 36 || c == 39 || c == 46) 
    {
        return true;
    } 
    
    if (c == 8) {
        do {
        str = str.substring(0, str.length-1);
        } 
        while (str.length>0 && JOK_00.indexOf(this.motif.charAt(str.length-1))== -1);
    }
    else 
    {
    
        if (this.motif.length == str.length) return false;
        
        while (JOK_00.indexOf(this.motif.charAt(str.length))==-1) 
        {
            str+= this.motif.charAt(str.length);
        }

        if (str.length == this.motif.length ) 
        {
            return false;
        }

        var x = this.motif.charAt(str.length);
        
        if ( x == JOK_NUM && (c < 96 || c > 105) && (c < 48 || c > 57 )) return false;
        if (x == JOK_ALPHA && (c < 65 || c > 90)) return false;
        if (x == JOK_ALPHANUM) 
        {
            if (c < 48) return false;
            if (c > 57 && c < 65) return false; 
            if (c > 90) return false;
        }

        var k = cleanKeyCode(c);
        k = k[((this.shiftDown)? "toLower":"toUpper")+"Case"]();
        str+= k;
        
        if (str.length == (this.motif.length - 1)&& (c < 96 || c > 105)) 
        {
            str+= this.motif.charAt(this.motif.length - 1);
        }
    }
    this.value = str;
    return false;
}

I used it in my Extjs project like that and it works :

{
                    id:'input.text.peNumber',
                    xtype:'textfield',
                    fieldLabel: TOP.displayReportDetails.field.report.numeroPE,
                    name: 'peNumber',
                    width : 75
                }
......
......
setMaskInput('input.text.peNumber', "AA000.000");

I know. It is a old javascript code. But I think It is possible to make it better.

Medley

[Condor]

I think Ext JS avoids this, because it is very user-unfriendly:
- You can't paste data
- You can't change a digit in an exiting entry

[medley]

True, there are some restrictions.
But in my case, we need to guide the user for complex input.

For example, I have a procedure number whose mask is 9999/9999(AAA) or a report number whose mask is A9-9999/9999.

That's why I was looking something similar in Extjs.

Medley

[Condor]

The 'Ext' way would be to restrict the input to the valid characters and validate the entered text (as you can see in my VType example posted earlier).

[medley]

It is an very interesting example.
I will use the code for fields which don't need an input mask but just a validation.
For example, to enter a name without special characters.

Thanks for the help.

Medley

[gotcha]

Need is to allow users to type in only printable characters. Tried to do it the following way, but it doesn't seem to be working - any ideas ?

        var luPrintableChars = /[x00-x1f]/;
        Ext.apply(Ext.form.VTypes, {
            luVtypePrintableChars: function(v){
                return luPrintableChars.test(v);
            },
            luPrintableCharsText: 'Printable characters only',
            luPrintableCharsMask: /[x00-x1f]/
        });
        
        var searchBox = new Ext.form.TextField({
            id: 'txtSearchFilter',
            scope:this,
            emptyText: "Type to filter grid contents",
            disabled: true,
            vtype: 'luVtypePrintableChars'
        }); 

[Condor]

Your VType config is a bit off and your regex should contain exactly the opposite:

var luPrintableChars = /[^\x00-^\x1f]/;
Ext.apply(Ext.form.VTypes, {
  luPrintableChars: function(v){
    return luPrintableChars.test(v);
  },
  luPrintableCharsText: 'Printable characters only',
  luPrintableCharsMask: luPrintableChars
});
        
var searchBox = new Ext.form.TextField({
  id: 'txtSearchFilter',
  scope:this,
  emptyText: "Type to filter grid contents",
  disabled: true,
  vtype: 'luPrintableChars'
});

[kcireneg]

I'm also having a problem, how about allowing only the Male or Female values in a textfield? is it possible? or just putting a validator if it is not a Male or Female. Pls. help.

[Condor]

Wouldn't a combobox or a radio group be more appropriate for only 2 valid entries?