Click here to Skip to main content
15,897,371 members
Articles / Web Development / ASP.NET

MaskingText for ASP.NET

Rate me:
Please Sign up or sign in to vote.
3.68/5 (15 votes)
20 Sep 2007CPOL1 min read 51.6K   555   19  
TextBox Control for ASP.NET with masking facility
// JScript File

function ReplaceString(mask)
{
    var rstring="";
    var maskR=mask.replace(/[\#|\@|\?]/g,'');
    var maskC=maskR.split('');
    for (var i=0;i<maskC.length;i++)
    {
        if (i!=maskC.length-1){rstring += "\\" + maskC[i] + "|";}
        else {rstring += "\\" + maskC[i];}
    }
    return rstring;
}
function processText(id,mask)
{
    
    if (mask==""){return;}
    this.mask=mask;
    this.id=id;
    this.pos=doGetCaretPosition(id);
    var pos=doGetCaretPosition(id);
    var text=document.getElementById(id).value;
    var rstring=ReplaceString(mask);
    var myRegExp = '/' + rstring + '/g';
    this.formattedText=text.replace(eval(myRegExp),'');
    document.getElementById(id).value=applyFormat(formattedText,mask);
    setCursorToNextLiteralChar();
}

function setCursorToNextLiteralChar()
{
    var currChar=this.mask.charAt(this.pos);
    var ipos=this.pos;
    while (isMaskingChar(currChar))
    {
        ipos++;
        currChar=this.mask.charAt(ipos);
    }
    setCaretPosition(this.id,ipos);
}

function isMaskingChar(character)
{
    var mask=this.mask;
    var maskR=mask.replace(/[\#|\@|\?]/g,'');
    var maskC=maskR.split('');
    var isMC=false;
    for (var i=0;i<maskC.length;i++)
    {
        if (character==maskC[i])
        {
            isMC=true;
            break;
        }
    }
    return isMC;
}
function applyFormat(text,format)
{
    for(var i=text.length;i<mask.length;i++)
    {
        text+="_";
    }
    var toReturn="";
    var gc=0;
    for(var j=0;j<format.length;j++)
    {
        if ((format.substring(j,j+1)!="#") && (format.substring(j,j+1)!="?") && (format.substring(j,j+1)!="@"))
        {
            toReturn+=format.substring(j,j+1);
        }
        else
        {
            toReturn+=text.substring(gc,gc+1);
            gc++;
        }
    }
    return toReturn;
}





//Code Got from internet regarding setting and getting the position of a cursor in text box
function doGetCaretPosition (ctrl) {
    var CaretPos = 0;
    // IE Support
    if (document.selection) {
	    document.getElementById(ctrl).focus();
	    var Sel = document.selection.createRange();
	    Sel.moveStart ('character', -document.getElementById(ctrl).value.length);
	    CaretPos = Sel.text.length;
    }
    // Firefox support
    else if (ctrl.selectionStart || ctrl.selectionStart == '0')
	    CaretPos = ctrl.selectionStart;
	//alert("FUN");    
    return (CaretPos);
}

function setCaretPosition(ctrl, pos)
{
    if(document.getElementById(ctrl).setSelectionRange)
    {
	    document.getElementById(ctrl).focus();
	    document.getElementById(ctrl).setSelectionRange(pos,pos);
    }
    else if (document.getElementById(ctrl).createTextRange) {
	    var range = document.getElementById(ctrl).createTextRange();
	    range.collapse(true);
	    range.moveEnd('character', pos);
	    range.moveStart('character', pos);
	    range.select();
    }
}

function checkKey(id,mask)
{
    //alert(event.keyCode);
    if ((event.keyCode!=8)&&(event.keyCode!=46)&&(event.keyCode!=37)&&(event.keyCode!=38)&&(event.keyCode!=39)&&(event.keyCode!=40))
    {
        if (mask==""){return;}
        this.id=id;
        this.pos=doGetCaretPosition(id);
        this.mask=mask;
        var currChar=this.mask.charAt(this.pos);
        if (currChar=="#")
        {
            if (!Digit()){return false;}
        }
        else if (currChar=="@")
        {
            if (!Alpha()){return false;}
        }
        else if (currChar=="?")
        {
            return true;
        }
        else 
        {
            return true;
        }
    }
    else
    {
        return true;
    }
}

function Digit()
{
    if (((event.keyCode >=96) && (event.keyCode <=105)) || ((event.keyCode >=48) && (event.keyCode <=57)) ){return true;}else{return false;}
}

function Alpha()
{
    if ((event.keyCode >=65) && (event.keyCode <=90)){return true;}else{return false;}
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
India India
My self Paresh Rathod, working as a web developer in Rajkot, Guajrat, India.

I am having total experience of 10 yrs in this field.

I beleive in...
TOGETHER WE CAN AND WE WILL MAKE A DIFFERENCE.

Comments and Discussions